Jquery pop-up box plug-in (using functions and objects)

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: