首页 > 代码库 > 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;}

 插件代码及应用示例

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