jquery 简单弹出层

预定义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 = $('<div class="z-popup-overlay"></div>'),
            $popup = $('<div class="z-popup">' +
                        '<a class="z-popup-close">X</a>' +
                        '<div class="z-popup-content">' +
                            (html ? html : '') +
                        '</div>' +
                     +'</div>');

        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('<p>hello</p>').show();
})(jQuery);