预定义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);