jquery 简单弹出层

预定义html代码：没有

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

预定义css

/* 基本弹出层样式 */
.my-popup-overlay {
    width:100%;
    height:auto;
    /*  width height is defined by javascript  */
    position: absolute;
    top:0;
    left: 0;
    z-index: 1000;
    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 + 200));
    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;
}

/* 弹出层样式自定义部分 */
.popup-title{
    padding:25px 0 10px;
    font-size: 14px;
    text-align: center;
}
.popup-inner{
    width:300px;
    padding:20px;
}

插件代码及应用示例

(function ($) {

    /*
     * jquery 简单弹出层
     * 主体内容作为参数传入
    */

    var Popup = function (html) {

        // html 弹出层的主体

        // 一个弹出层配一个遮罩
        var $overlay = $("<div class=‘my-popup-overlay‘></div>"),

            // 只定义边框和关闭按钮，其余在参数中定义
            $popup = $("<div class=‘my-popup‘>"+
                        "<a class=‘my-popup-close‘>×</a>" +
                        "<div class=‘my-popup-content‘>" +
                           (html ? html : "") +
                        "</div>" +
                   "</div>");

        return {
            show: function () {
                // $overlay and $popup append to body
                $("body").append($overlay).append($popup);

                var that = 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 () {

                // 移除本次遮罩和弹出层
                $overlay.remove();
                $popup.remove();
            }
        };

    };

    // 应用示例
    var pup1Html = ‘<h2 class="popup-title">标题</h2>‘ +
                   ‘<div class="popup-inner">so i say a little prayer</div>‘;

    var popup1 = new Popup(pup1Html);
    popup1.show();
})(jQuery);

jquery 简单弹出层,布布扣,bubuko.com