CSS:
<style type="text/css">
body,html{padding:0;margin:0;}
.overlayer{background: #000;opacity: 0.5;filter:alpha(opacity=50);position: fixed;top: 0;left: 0;z-index: 1;}
.dialog{position: absolute; 300px;height: 300px;left: 50%;top:50%;margin-left: -150px;margin-top: -150px;z-index: 2;
border:1px solid #9bdf70; background:#f0fbeb;border-radius: 8px;}
.dialog img{margin: 30px auto 0;display: block;border: 5px solid #fff000;}
.dialog .close{position: absolute;top: 10px;right: 10px; 50px;height: 16px;font-size: 14px;color: #000;border:1px solid #ffcc00; background:#fffff7;border-radius: 3px;text-align: center;cursor: pointer;}
.dialog a{color: #000;font-size: 12px;display: block;text-align: center;margin: 10px auto;padding:3px;text-decoration: none;}
</style>
HTML:
<input type="button" value="弹层" id="btn" />
<div id="dialog" class="dialog" style="display:none;">
<div id="close" class="close">X</div>
<img src="me.jpg" alt="" width="145" height="200" />
<a href="javascript:;">显哥哥,亲一个`(*∩_∩*)′</a>
</div>
<input type="button" value="弹层1" id="btn1" />
<div id="dialog1" class="dialog" style="display:none;">
<div id="close1" class="close">X</div>
<img src="me.jpg" alt="" width="145" height="200" />
<a href="javascript:;">宝贝,亲一个`(*∩_∩*)′</a>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.overlay.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.overlay();
$.overlay({
$clickId : $("#btn1"),
$contentId : $("#dialog1"),
$closeId : $("#close1")
});
});
</script>
jquery.overlay.js:
/*
*Author: 楚玉
*Date: 2013.06.10
*for: personnal
*/
;(function($){
$.overlay = function(param){
/*clickId
**contentId
**closeId
*/
/*默认参数*/
$.overlay.defaults = {
$clickId : $("#btn"),
$contentId : $("#dialog"),
$closeId : $("#close")
};
var opts = $.extend({},$.overlay.defaults,param),
clickEle = opts.$clickId,
contentEle = opts.$contentId,
closeEle = opts.$closeId;
//点击触发
clickEle.bind("click",function(){
showDialog();
showLayer();
});
//关闭按钮
closeEle.bind("click",function(){
removeOverlay();
contentEle.hide();
});
$(window).resize(function(){
sizeLayer("overlay");
});
function showDialog(){
contentEle.css("display","block");
}
function showLayer(){
var overlay = $("<div id='overlayer' class='overlayer'></div>");
$("body").append(overlay);
sizeLayer("overlayer");
}
function sizeLayer(id){
var _width = $(document).width(),
_height = $(document).height();
$("#" + id).css({"width":_width,"height":_height});
}
function removeOverlay(){
$("#overlayer").remove();
}
}
})(jQuery)
注意点:
一:
var opts = $.extend({},$.overlay.defaults,param),是继承的一种方式,在jQuery插件中普遍被使用。(js中有原型继承,call,apply继承)。
二:
$.overlay.defaults必须写在前面,否则undefined。
三:
还有var a = 1, b = 2;中间使用逗号相隔,知识是知道的。通常写的时候不注意就错了,还要慢慢看。昨天那个if()判断==写成了=赋值 0.0