首页 > 代码库 > jquery 简单弹出层

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;}
View Code

插件代码及应用示例

(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);
View Code