Write a simple and easy to use pop-up layer plugin

Nonsense not much to say, directly on the code:

First, CSS

 .overlaybackground {top:  0% 0%;    Width:  100%;    Height:  100%;    Display:none;    Position:absolute;    Background -color: #555555 -index:1001;    -moz-opacity:0.7; Opacity:.     70 =70 10%;    Left:  10%;    BORDER:16PX solid lightblue;    Background -color:white;    Z -index:1002; Overflow:auto;}  

View Code

Second, the plugin JS

(function($) {$.fn. Youngdialog=function(options) {//Default Parameters        varDefaults = {            //Title: "",Width: "80%", Height:"80%", Modal:true        }; //Overwrite by OptionsOptions =$.extend (defaults, options); //Show Block Div        if(options.) Modal) $ ("Body"). Append ("<div id= ' divbackoverlay ' class= ' overlaybackground ' ></div>"); //Content Div        varDivcontent = $ ( This); varDivoverlay = $ ("#divBackOverlay");        Divcontent.show ();        Divoverlay.show (); //StyleDivcontent.addclass ("Contentdivdialog"); Divcontent.css ("Width", Options.        Width); Divcontent.css ("Height", Options.        Height); //Close ButtonDivcontent.find ("#btnCloseDialog"). Bind ("click",function(e) {divcontent.hide ();        Divoverlay.hide ();    }); };}) (jQuery);

View Code

Third, Demo

<! DOCTYPE html>$ (document). Ready (function () {            $("#btnPopup"). Click (function () {                $("#MyDiv"). Youngdialog ({Width:"500px", Height:"400px", Modal:true                });        });    }); </script>My Content can be everything. </div> </div></body>View Code
Write a simple and easy to use pop-up layer plugin