This plug-in uses two methods: process-oriented writing (or function writing) and process-oriented writing. Okay. NowCode;
JavaScript code:
// Process-oriented writing
(Function ($ ){
$. FN. showdialog = function (options) {// dialog box plug-in
VaR defaults = {
Showdiv: ". Dialog ",
Bgauto: "true", // whether a mask box exists
Clickbtn: ". BTN ",
Closebtn: ". Close", // close button,
Bgdiv: ". bg ",
Autoclose: "false"
}
VaR Options = $. Extend ({}, defaults, options ||{}); // Merge multiple objects into one
Return this. Each (function (){
VaR $ this = $ (this ),
$ Bgdiv = $ (options. bgdiv ),
$ Clickbtn = $ (options. clickbtn ),
$ Closebtn = $ (options. closebtn ),
H = $ (document). Height ();
// Function-process-oriented mode
Function showcenter () {// define the Center Function in the dialog box
VaR objw = $ (window );
VaR objc = $ this;
VaR brsw = objw. Width ();
VaR brsh = objw. Height ();
VaR scll = objw. scrollleft ();
VaR sclt = objw. scrolltop ();
VaR _ w = objc. Width ();
VaR _ H = objc. Height ();
VaR left = scll + (brsw-_ w)/2;
VaR Top = sclt + (brsh-_ H)/2;
Objc.css ({
"Left": left,
"TOP": Top
});
}
$ (Window). Resize (function (){
If (! $ This. Is (": visible ")){
Return;
}
Showcenter ();
VaR d_h = $ (document). Height ();
});
$ (Window). Scroll (function (){
If (! $ This. Is (": visible ")){
Return;
}
Showcenter ();
});
// Click the pop-up event
$ Clickbtn. BIND ("click", function (){
$ This. fadein ("fast ");
Showcenter ();
Export bgdiv.show().css ({"height": H });
});
// Click Close event
$ Closebtn. BIND ("click", function (){
$ This. fadeout ("fast ");
$ Bgdiv. Hide ();
});
// Whether to automatically close the event
If (options. autoclose = "true "){
Setinterval (function (){
$ This. Hide ();
$ Bgdiv. Hide ();
}, 5000)
}
})
}
}) (Jquery );
Call method: $ (". Dialog"). showdialog ()
// Object-oriented method
(Function ($ ){
$. FN. showdialog_2 = function (options) {// plug-in the pop-up box
VaR defaults = {// configure
Showdiv: ". Dialog ",
Bgauto: "true", // whether a mask box exists
Clickbtn: ". BTN ",
Closebtn: ". Close", // close button,
Bgdiv: ". bg ",
Autoclose: "false"
}
VaR Options = $. Extend ({}, defaults, options ||{}); // Merge multiple objects into one
// Function-object-oriented mode
VaR OBJ = {
Init: function (){
This. opendiv ();
This. setcss ();
This. closediv ();
},
// Set the style
Setcss: function (){
VaR objw = $ (window ),
Objc = $ (options. showdiv ),
Brsw = objw. Width (),
Brsh = objw. Height (),
Scll = objw. scrollleft (),
Sclt = objw. scrolltop (),
_ W = objc. Width (),
_ H = objc. Height (),
Left = scll + (brsw-_ w)/2,
Top = sclt + (brsh-_ H)/2
Objc.css ({
"Left": left,
"TOP": Top
});
},
// Method of the pop-up box
Opendiv: function (){
$ (Options. showdiv). Show ();
$ (Options. bgdiv). Show ();
},
// Close the dialog box
Closediv: function (){
$ (Options. closebtn). BIND ("click", function (){
$ (Options. showdiv). Hide ();
$ (Options. bgdiv). Hide ();
});
}
};
// Return the object and follow the JQ link to call the Function
Return this. Each (function (){
$ (This). BIND ("click", function (){
OBJ. INIT ();
});
})
}
}) (Jquery );
Call method: $ (". BTN"). showdialog_2 ();
HTML:
<Div class = "BTN"> pop-up button </div>
<Div class = "dialog">
<Div class = "close"> </div>
</Div>
<Div class = "BG"> </div>
CSS: