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 CodeWrite a simple and easy to use pop-up layer plugin