<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery弹出层组件</title>
<style>
body { margin:0; height:2000px;}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
(function($){
$.fn.extend({
"alertbox":function(options){
var defaults={
alertTag:"<div>",
width:500,
height:500,
minbg:true, //是否显示大背景层
center:true, //是否上下左右居中
ominbgcolor:"#000",
ominbgopacity:0.5,
ominbgzIndex:1,
dubblebgclick:true
};
var opts=$.extend(defaults,options);
var alertBox=$(opts.alertTag);
alertBox.css({width:opts.width+"px",height:opts.height+"px",border:"1px solid red",zIndex:opts.ominbgzIndex+1,backgroundColor:"#fff"});
if(opts.center){
alertBox.css({position:"absolute",left:"50%", top:"50%", marginLeft:-opts.width/2+"px",marginTop:-opts.height/2+"px",})
}
$("html,body").css({height:"100%",overflow:"hidden"})
alertBox.appendTo($("document,body"));
if(opts.minbg){
var minBg=$("<div>");
var height;
if($("body").height()>$(window).height()){
height=$("body").height()
}
else
{
height=$(window).height()
}
minBg.css({width:"100%" , height:height+"px", position:"absolute", top:0, left:0,background:opts.ominbgcolor,opacity:opts.ominbgopacity,zIndex:opts.ominbgzIndex})
$(window).resize(function(){
if($("body").height()>$(window).height()){
height=$("body").height()
}
else
{
height=$(window).height()
}
minBg.css({height:height+"px"})
})
minBg.appendTo($("document,body"));
if(opts.dubblebgclick){
minBg.dblclick(function(){
alertBox.remove();
$(this).remove();
return false;
})
}
}
}
})
})(jQuery)
</script>
</head>
<body>
<a id="j_tanchu1" href="#">弹出</a>
<script>
$(function(){
$("#j_tanchu1").click(function(){
$().alertbox({width:100, height:200 ,dubblebgclick:false});
})
})
</script>
<div id="box"></div>
</body>
</html>
