封装弹窗 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({ 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；
100%;
line-heigth:35px;
text-indent:1 em;
}
.close
{
float:right;
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;
100%;
text-indent:1 em;
background-color:#0066cc;
}
#zz{
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={ 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='"+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='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<0) { endX=0; } if(endY>maxY) { endY=maxY; } else if(endY<0) { 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();//移除遮罩 }) }