封装弹窗 html
<head>
<script src="jquery.js"></script>
<script src="tc.js"></script>
<title>tc</title>
<link href="tc.css" rel=“stylesheet” type=“text/css”/>
</head>
<body>
<div><input id='tc' type='button' value='弹窗'</div>
</body>
</html>
<script type='text/javascript'>
$(document).ready(function(e){
var button="<input id='qd' type='button' value='确定'/>";
$("#tc").click(function(){
var tc= new Window({
width:400,
height:300,
left:150,
top:200,
buttons:button,
title:'tc',
content:'hello world',
isMask:true,
isDrag:true,
}) })
}) </script>
css 文件
#zhuti{
position:absolute;
background-color:#999999;
overflow:hidden;
z-index:4;
border-radius:5px;
}
.title
{
padding:1px;
background-color:#6699FF;
vertical-align:middle;
heigth：35px；
width:100%;
line-heigth:35px;
text-indent:1 em;
}
.close
{
float:right;
width:35px;
heigth:35px;
font-weight:bold;
line-height:35px;
vertical-align:middle;
color:#FFFFFF;
font-size:18px;
}
.close:hover
{
cursor:pointer;
}
.content
{
padding:3px;
text-indent:1 em;
padding-top:10px;
background-color:#fff;
}
.btnx{
height:40px;
width:100%;
text-indent:1 em;
background-color:#0066cc;
}
#zz{
width:100%;
heigth:100%
opacity:0.4;
display:block;
background-color:#333333;
z-index:1;
position:absolute;
top:0px;
left:0px;
}
tc.js文件 红色字体 中英混淆
var Window = function(config)//js封装类的一种方式 var Window = function(){} config 参数 jason 数据类型常用作封装类的配置参数
{
//初始化接受参数 json取值方式 config.width
this.config={
width:config.width||300,
height:config.heigth||200,
left:config.left||300，
top:config.top||300，
buttons:config.buttons ||"",
title:config.title||"标题"，
content：config.content||"内容"，
isMask:config.isMask==false?false:config.isMask ||true,
isDrag:config.isDrag==false?false:config.isDrag ||true,
}
// 加载弹出窗体 造div 注意里面变量连接方式
var zhuti = "<div class='zhuti' id='zhuti' style='width:"+this.config.width+"px; height:"+this.config.heigth+"px; left:"+this.config.left+"px; top:"+this.config.top+"px;'></div>";
//找到body对象追加主体div
$("body").append(zhuti);
//加载弹窗标题
var content="<div id='title' class='title'>"+this.config.title+"<div id='close' class='close'>X</div></div>";
//加载弹窗内容
var nrh =this.config.heigth-80;
content = content+"<div id='content' class='content' style='width:100%; heigth:"+nrh+"px'>"+this.config.content+"</div>";
//加载按钮
content = content+"<div id='btnx' class='btnx'>"+this.config.buttons+"</div>";
//将content拼接追加主体
$("#zhuti").html(content);
//创建遮罩层
if(this.config.isMask)
{
var zz ="<div id='zz'></div>";
$("body").append(zz);
$("#zz").css('display','block');
}
//拖动事件
var maxX = $(window).width()-this.config.width;
var maxY = $(window).heigth()-this.config.heigth;
var minX=0; var minY=0;
if(this.config.isDrag)
{
$("title").bind('mousedown',function(e){
var endX= 0;//移动后的x坐标
var endY= 0;//移动后的y坐标
var startX=parseInt($("#zhuti").css("left"));//弹出初始x坐标
var startY=parseInt($("#zhuti").css("top"));//弹出初始 y 坐标
var downX= e.clientX;//鼠标按下 x 坐标
var downY= e.clientY;//鼠标按下 x 坐标
//绑定鼠标移动事件
$("body").bind("mousemove",function(es){
endX = es.clientX -downX+startX;//x坐标移动
endY = es.clientY -downY+startY;//Y坐标移动
//最大最小限制
if(endX>maxX)
{
endX=maxX;
}
else if(endX<)
{
endX=0;
}
if(endY>maxY)
{
endY=maxY;
}
else if(endY<)
{
endY=0;
}
$("#zhuti").css("top",endY+"px");
$("#zhuti").css("left",endX+"px");
})
})
}
//鼠标抬起 释放移动事件
$("body").bind("mouseup",funhction(){
$("body").unbind("mousemove");
})
//关闭窗口
$("#qd").click(function(){
$("#zhuti").remove();//移除主体
$("zz").remove();//移除遮罩
})
$(".close").click(function(){
$("#zhuti").remove();//移除主体
$("zz").remove();//移除遮罩
})
}