The following figure:
But these pop-up window's style is very monotonous cannot set, and the window caption also displays the different title content according to the different browser, very ugly! For modern people with high aesthetic standards, it is a big discount!
jquery is now so popular, so hot, but it seems that the Internet does not provide a similar MessageBox plug-ins (or just I did not find it), there are a lot of similar pattern window plug-ins, but this is not what I want. No ready-made, I had to spend a little time on my previous writing based on my personal JS frame messagebox shift value over, that is, the jmessagebox of this article.
It uses a very simple CSS + JS collocation. CSS is used to customize the style of the window (the specific example can be referenced in the source package in the CSS style file), JS is responsible for the call, such as the following example:
Example 1: Simple call
Copy Code code as follows:
JQuery.jMessageBox.show (' Hello word! ');
The code is simple, isn't it? Did you find the feeling in the MessageBox? But this method you can't control the content of the title (in fact, you can change the configuration parameters to change the title) and "Yes" that button action, click it just close the window.
Effect Chart:
Example 2: Normal call
Copy Code code as follows:
JQuery.jMessageBox.show (' System message ', ' Hello! ');
The code is simple, isn't it? Although you can change the content of the title, but this method you still can not control the "Yes" button action, click it just close the window.
Effect Chart:
Example 3: Complex calls
Copy Code code as follows:
JQuery.jMessageBox.show ({
WIDTH:350,
Title: ' System Messages ',
Message: ' Do you want to continue next? ',
Yesbutton: {
Click:function () {
JQuery.jMessageBox.hide ();
}
},
CancelButton: {
Click:function () {
JQuery.jMessageBox.hide ();
}
},
Bottom: {
Text: ' Description: If you want to continue operation, please click ' Yes '! ',
Click:function () {
Alert (' Are You dot me? ');
}
}
});
In this example, we defined: the width of the window, the caption, the content, the action of the Yes button, the action of the No button, the action of the Cancel button, and the text description and action at the bottom.
Effect Chart:
Parameter definitions for Jmessagebox
1. Global Configuration parameters: JQuery.jMessageBox.setttings
Note: Global configuration parameters are used only before the Show method is first invoked or when a simple Show method is invoked!
Width: Sets the default width of the window, with the default value of 350.
Title: Sets the default caption for the window, and the default value is null.
Bottomtext: Sets the text description at the bottom of the window, and the default value is null.
The text of the Yesbuttontext:yes button, and the default value is null.
The text of the Nobuttontext:no button, and the default value is null.
The text of the Cancelbuttontext:cancel button, and the default value is null.
2, window configuration parameters.
Window configuration parameters can be passed in each time the Show method is invoked (example 3 above) to configure the display window style.
Width: Sets the width of the window if you do not set a width value that will take the global configuration parameter.
Height: Sets the height of the window, if not set to Automatic (recommended)
Top: Sets the upper margin distance when the window is displayed.
Left: Sets the distance of the left-hand margin when the window is displayed.
Note: Top and left values must be set or not set at the same time. If not set (recommended), the default fixed center display!
Title: Sets the caption of the window if you do not set the title value to take the global configuration parameter. If the value is set to null or an empty string, the title bar is hidden!
Message: Sets what the window needs to display. If not set, or set to null or empty string, the content area is hidden.
Yesbutton: Sets the text (text) of the Yes button in the window and the event (click) processed after the click. If not set, the window does not display the Yes button.
Nobutton: Sets the text (text) of the No button in the window and the event (click) processed after the click. If not set, the window does not display the No button.
CancelButton: Sets the text of the Cancel button in the window (text) and the event (click) processed after the click. If not set, the window does not display the Cancel button.
Bottom: Sets the description text (text) of the text bar at the bottom of the window and the event (click) processed after the click. If not set, the window does not display the bottom text bar.
source code and sample downloads (with two styles of window styles in the example):
Http://xiazai.jb51.net/200912/yuanma/jmessagebox.rar
