预定义html代码：没有

    所有代码通过js生成和移除。

预定义css

.z-popup-overlay{
       width:100%;    min-height: 100%;    height:800px;    position: absolute;    top:0;    left:0;    z-index:1000;    background-color: #000;    opacity: 0.5;    filter:alpha(opacity=50);}.z-popup{
       position: fixed;    top:200px;    _position:absolute;    _top:expression(eval(document.documentElement.scrollTop + 200));    z-index:1001;    background:#fff;    left:50%;    border:2px solid #de8700;    border-radius:5px;}.z-popup-close{
       position: absolute;    top:2px;    right: 2px;    color:#f00;    cursor:pointer;}.z-popup-content{
       padding:10px;}

 

插件代码及应用示例

(function ($) {    /*     * 原理：生成和移除弹出层     * 用法：Popup(html).show();  字符串html是弹出层的主体     *     */    var Z_Popup = function (html){        // 基本结构        var $overlay = $('
     
'),            $popup = $('
     
      ' +                        '
      X' +                        '
      
       ' +                            (html ? html : '') +                        '
      
' +                     +'
     
');        return {            show: function () {                // a singleton                if ($(".z-popup").length !== 0) {                    return true;                }                // generate popup                $("body").append($overlay).append($popup);                var that = this;                $overlay.css({                    height: $(document).height()                });                $popup.css({                    "margin-left": -($popup.width() / 2) + "px"                });                $(".z-popup-close").on("click", function (e) {                    e.preventDefault();                    that.hide();                });            },            hide: function () {                // remove the popup overlay and popup                $overlay.remove();                $popup.remove();            }        };    };    // 用法    Z_Popup('
hello
').show();})(jQuery);