弹窗代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script type="text/javascript" src="jquery-1.11.2.min.js"> 7 </script> 8 <script type="text/javascript" src="tanchuang.js"> 9 </script> 10 <link href="tanchuang.css" rel="stylesheet" type="text/css" /> 11 <style type="text/css"> 12 *{ 13 margin: 0px auto; 14 } 15 </style> 16 </head> 17 18 <body style="background-color:#999"> 19 <div style="200px; margin-top:10px"><input type="button" value="弹出窗口" id="btntc" style="100px; height:30px; font-size:18px;" /></div> 20 <div id="tc"></div> 21 </body> 22 <script type="text/javascript"> 23 $(document).ready(function(e) { 24 25 $('#btntc').click(function(){ 26 27 var html = "<div style='color:red'>这是测试的弹窗</div>"; 28 var button ="<input type='button' value='确定' /><input type='button' value='取消' />"; 29 var win = new Window({ 30 31 width : 500, //宽度 32 height : 400, //高度 33 title : '测试弹窗', //标题 34 content : html, //内容 35 isMask : false, //是否遮罩 36 buttons : button, //按钮 37 isDrag:true, //是否移动 38 39 }); 40 41 }) 42 }); 43 </script> 44 </html>
弹窗css代码：
1 .zhuti 2 { 3 position:absolute; 4 z-index:3; 5 font-size:14px; 6 border-radius:5px; 7 box-shadow:0 0 5px white; 8 overflow:hidden; 9 color:#333; 10 } 11 .title 12 { 13 background-color:#3498db; 14 vertical-align:middle; 15 height:35px; 16 width:100%; 17 line-height:35px; 18 text-indent:1em; 19 } 20 .close{ 21 float:right; 22 width:35px; 23 height:35px; 24 font-weight:bold; 25 line-height:35px; 26 vertical-align:middle; 27 color:white; 28 font-size:18px; 29 } 30 .close:hover 31 { 32 cursor:pointer; 33 } 34 .content 35 { 36 text-indent:1em; 37 padding-top:10px; 38 } 39 .btnx 40 { 41 height:30px; 42 width:100%; 43 text-indent:1em; 44 } 45 .btn 46 { 47 height:28px; 48 width:80px; 49 float:left; 50 margin-left:20px; 51 color:#333; 52 } 53 #zz 54 { 55 width:100%; 56 height:100%; 57 opacity:0.15; 58 display:none; 59 background-color:#ccc; 60 z-index:2; 61 position:absolute; 62 top:0px; 63 left:0px; 64 }
弹窗js代码：
1 // JavaScript Document 2 3 // 每个弹窗的标识 4 var x =0; 5 var idzt = new Array(); 6 var Window = function(config){ 7 8 //ID不重复 9 idzt[x] = "zhuti"+x; //弹窗ID 10 11 //初始化，接收参数 12 this.config = { 13 width : config.width || 300, //宽度 14 height : config.height || 200, //高度 15 buttons : config.buttons || '', //默认无按钮 16 title : config.title || '标题', //标题 17 content : config.content || '内容', //内容 18 isMask : config.isMask == false?false:config.isMask || true, //是否遮罩 19 isDrag : config.isDrag == false?false:config.isDrag || true, //是否移动 20 }; 21 22 //加载弹出窗口 23 var w = ($(window).width()-this.config.width)/2; 24 var h = ($(window).height()-this.config.height)/2; 25 26 var nr = "<div class='zhuti' id='"+idzt[x]+"' bs='"+x+"' style='"+this.config.width+"px; height:"+this.config.height+"px; background-color:white; left:"+w+"px; top:"+h+"px;'></div>"; 27 $("body").append(nr); 28 29 //加载弹窗标题 30 var content ="<div id='title"+x+"' class='title' bs='"+x+"'>"+this.config.title+"<div id='close"+x+"' class='close' bs='"+x+"'>×</div></div>"; 31 //加载弹窗内容 32 var nrh = this.config.height - 75; 33 content = content+"<div id='content"+x+"' bs='"+x+"' class='content' style='100%; height:"+nrh+"px;'>"+this.config.content+"</div>"; 34 //加载按钮 35 content = content+"<div id='btnx"+x+"' bs='"+x+"' class='btnx'>"+this.config.buttons+"</div>"; 36 37 //将标题、内容及按钮添加进窗口 38 $('#'+idzt[x]).html(content); 39 40 //创建遮罩层 41 if(this.config.isMask) 42 { 43 var zz = "<div id='zz'></div>"; 44 $("body").append(zz); 45 $("#zz").css('display','block'); 46 } 47 48 //最大最小限制，以免移动到页面外 49 var maxX = $(window).width()-this.config.width; 50 var maxY = $(window).height()-this.config.height; 51 var minX = 0, minY = 0; 52 53 54 //窗口移动 55 if(this.config.isDrag) 56 { 57 //鼠标移动弹出窗 58 $(".title").bind("mousedown",function(e){ 59 60 var n = this.getAttribute("bs"); //取标识 61 62 //使选中的到最上层 63 $(".zhuti").css("z-index",3); 64 $('#'+idzt[n]).css("z-index",4); 65 66 //取初始坐标 67 var endX = 0, //移动后X坐标 68 endY = 0, //移动后Y坐标 69 startX = parseInt($('#'+idzt[n]).css("left")), //弹出层的初始X坐标 70 startY = parseInt($('#'+idzt[n]).css("top")), //弹出层的初始Y坐标 71 downX = e.clientX, //鼠标按下时，鼠标的X坐标 72 downY = e.clientY; //鼠标按下时，鼠标的Y坐标 73 74 //绑定鼠标移动事件 75 $("body").bind("mousemove",function(es){ 76 77 endX = es.clientX - downX + startX; //X坐标移动 78 endY = es.clientY - downY + startY; //Y坐标移动 79 80 //最大最小限制 81 if(endX > maxX) 82 { 83 endX = maxX; 84 } else if(endX < 0) 85 { 86 endX = 0; 87 } 88 if(endY > maxY) 89 { 90 endY = maxY; 91 } else if(endY < 0) 92 { 93 endY = 0; 94 } 95 96 $('#'+idzt[n]).css("top",endY+"px"); 97 $('#'+idzt[n]).css("left",cssendX+"px"); 98 99 window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty(); //取消选中文本 100 101 }); 102 }); 103 //鼠标按键抬起，释放移动事件 104 $("body").bind("mouseup",function(){ 105 106 $("body").unbind("mousemove"); 107 108 }); 109 } 110 111 //关闭窗口 112 $(".close").click(function(){ 113 114 var m = this.getAttribute("bs"); //找标识 115 $('#'+idzt[m]).remove(); //移除弹窗 116 $('#zz').remove(); //移除遮罩 117 118 }) 119 120 x++; //标识增加 121 122 }
显示：
