jquery Simple Popup Layer

Pre-defined HTML code: no

All code is generated and removed via JS.

Pre-defined CSS

/*Basic pop-up layer style*/. My-popup-overlay{width:100%;Height:Auto;/*width height is defined by JavaScript*/position:Absolute;Top:0; Left:0;Z-index: +;Background-color:#000;Opacity:0.2;*filter:Alpha (OPACITY=20);}. My-popup{position:fixed;Top:200px; Left:50%;/*margin-left:; defined by JS*/_position:Absolute;_top:expression (eval (Document.documentElement.scrollTop +));padding:10px;-moz-border-radius:5px;-webkit-border-radius:5px;Border-radius:5px;background:Gray;Z-index:1001;}. My-popup-close{position:Absolute;Top:10px; Right:10px;font-size:16px;width:20px;Height:20px;text-align:Center;Line-height:20px;background:#0aa;Color:#f00;cursor:Pointer;}. My-popup-close:hover{text-decoration:None;Color:#fff;Font-weight:Bold;}. My-popup-content{Background-color:#fff;}/*pop-up Layer style customization Section*/. Popup-title{padding:25px 0 10px;font-size:14px;text-align:Center;}. Popup-inner{width:300px;padding:20px;}

View Code

Plug-in code and application examples

(function ($) {    /** jquery Simple popup layer * Subject content passed in as parameters*/    varPopup =function(HTML) {//the body of the HTML popup layer        //A pop-up layer with a mask        var$overlay = $ ("<div class= ' My-popup-overlay ' ></div>"),            //define only the border and the Close button, and the rest are defined in the parameters$popup = $ ("<div class= ' My-popup ' >" + "<a class= ' my-popup-close ' >x</a>" + "<div class= ' my-popup-content ' >" +(HTML? HTML: "") + "</div>" + "</div>"); return{show:function () {                //$overlay and $popup append to Body$ ("Body"). Append ($overlay). Append ($popup); varthat = This;                $overlay. css ({width: $ (window). Width (), Height: $ (document). Height ()                }); $popup. css ({"Margin-left":-($popup. Width ()/2) + "px"                }); $(". My-popup-close"). On ("click",function() {that.hide ();            }); }, Hide:function () {                //Removing this mask and pop-up layer$overlay. Remove ();            $popup. Remove ();    }        };    }; //Application Examples    varpup1html = ' 
; varPopup1 =NewPopup (pup1html); Popup1.show ();}) (jQuery);

View Code