Jmessagebox jquery-based window plug-in

For example:

However, these pop-up window styles are very monotonous and cannot be set, and the title of the window displays different titles based on different browsers, which is very ugly! For modern people with high aesthetics, it is a big discount!

Jquery is so popular and popular now, but it seems that plug-ins like MessageBox are still not provided on the Internet (or I just didn't find them). There are a lot of plug-ins in similar mode window, but this is not what I want. If it is not ready-made, I have to spend some time shifting the MessageBox I previously wrote based on my personal JS framework, that is, the jmessagebox in this article.

It is used with simple CSS + Js. CSS is the style used to customize the window (for specific examples, refer to the CSS style file in the source code package), JS is responsible for calling, as shown in the following example:

Example 1: simple callCopyCodeThe Code is as follows: jquery. jmessagebox. Show ('Hello word! ');

The code is simple, right? Did you find the feeling in MessageBox? However, you cannot control the title content in this method (you can change the title by changing the configuration parameters) or click the "yes" button to close the window.

:

Example 2: normal callCopy codeThe Code is as follows: jquery. jmessagebox. Show ('System message', 'Hello! ');

The Code is also very simple, isn't it? Although you can change the title content, you still cannot control the action of the "yes" button in this method. Clicking it only closes the window.

:

Example 3: complex callCopy codeThe Code is as follows: jquery. jmessagebox. Show ({
Width: 350,
Title: 'System message ',
Message: 'Do you want to continue the next step? ',
Yesbutton :{
Click: function (){
Jquery. jmessagebox. Hide ();
}
},
Cancelbutton :{
Click: function (){
Jquery. jmessagebox. Hide ();
}
},
Bottom :{
Text: 'Note: If you want to continue, click "yes "! ',
Click: function (){
Alert ('Are you waiting for me? ');
}
}
});

In this example, we define the window width, title, content, Yes button action, no button action, cancel button action, and text description and action at the bottom.

:

Jmessagebox Parameter Definition
1. Global configuration parameters: jquery. jmessagebox. setttings
Note: The global configuration parameter is used only before the first call of the show method or when a simple show method is called!
Width: Set the default width of the window. The default value is 350.
Title: Set the default title of the window. The default value is null.
Bottomtext: Specifies the text description at the bottom of the window. The default value is null.
Yesbuttontext: the text of the Yes button. The default value is null.
Nobuttontext: the text of the no button. The default value is null.
Cancelbuttontext: the text of the cancel button. The default value is null.

2. window configuration parameters.
Window configuration parameters can be passed in each call to the show method (Example 3 above) to configure the display window style.
Width: Set the window width. If this parameter is not set, the width value in the global configuration parameter is used.
Height: Set the window height. If not set, it is set to automatic (recommended)
Top: Set the top margin distance when the window is displayed.
Left: Set the left margin when the window is displayed.
Note: The top and left values must be set at the same time or not. If this parameter is not set (recommended), the center is displayed by default!
Title: Set the title of the window. If this parameter is not set, the title value in the global configuration parameter is used. If the value is set to null or an empty string, the title bar will be hidden!
Message: Set the content to be displayed in the window. If this parameter is not set, or is set to null or a null string, the content area is hidden.
Yesbutton: set the text of the Yes button in the window and click the post-processing event (click ). If this parameter is not set, the "yes" button is not displayed in the window.
Nobutton: Set the text of the No button in the window and click the post-processing event (click ). If this parameter is not set, no is displayed in the window.
Cancelbutton: Set the text and click of the cancel button in the window ). If this parameter is not set, the cancel button is not displayed in the window.
Bottom: Set the text in the text bar at the bottom of the window and click the post-click event ). If this parameter is not set, the text bar at the bottom of the window is not displayed.

source code and example download (the example contains two style window style):
http://xiazai.jb51.net/200912/yuanma/jmessagebox.rar