模块：弹窗
效果图：
主页代码
<script type="text/javascript" src="jquery-1.11.2.min.js"> </script> <script type="text/javascript" src="tanchuang.js"> </script> <link href="tanchuang.css" rel="stylesheet" type="text/css" /> <style type="text/css"> *{ margin: 0px auto; } </style> </head> <body style="background-color:#999"> <div style="width:200px; margin-top:10px"> <input type="button" value="弹出窗口" id="btntc" style="width:100px; height:30px; font-size:18px;" /> </div> </body> <script type="text/javascript"> $(document).ready(function(e) { $('#btntc').click(function(){ var html = "<div style='color:red'>这是测试的弹窗</div>"; var button ="<input type='button' value='确定' /><input type='button' value='取消' />"; var win = new Window({ width : 400, //宽度 height : 300, //高度 title : '测试弹窗', //标题 content : html, //内容 isMask : false, //是否遮罩 buttons : button, //按钮 isDrag:true, //是否移动 }); }) }); </script>
js代码
1 // 每个弹窗的标识 2 var x =0; 3 4 var idzt = new Array(); 5 6 var Window = function(config){ 7 8 //ID不重复 9 idzt[x] = "zhuti"+x; //弹窗ID 10 11 //初始化，接收参数 12 this.config = { 13 width : config.width || 300, //宽度 如果没有值，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='width:"+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='width: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 //创建遮罩层 42 if(this.config.isMask) 43 { 44 var zz = "<div id='zz'></div>"; 45 $("body").append(zz); 46 $("#zz").css('display','block'); 47 } 48 49 //最大最小限制，以免移动到页面外 50 var maxX = $(window).width()-this.config.width; 51 var maxY = $(window).height()-this.config.height; 52 var minX = 0, 53 minY = 0; 54 55 //窗口移动 56 if(this.config.isDrag) 57 { 58 //鼠标移动弹出窗 59 $(".title").bind("mousedown",function(e){ 60 61 var n = $(this).attr("bs"); //取标识 62 63 //使选中的到最上层 64 $(".zhuti").css("z-index",3); 65 $('#'+idzt[n]).css("z-index",4); 66 67 //取初始坐标 68 var endX = 0, //移动后X坐标 69 endY = 0, //移动后Y坐标 70 startX = parseInt($('#'+idzt[n]).css("left")), //弹出层的初始X坐标 71 startY = parseInt($('#'+idzt[n]).css("top")), //弹出层的初始Y坐标 72 downX = e.clientX, //鼠标按下时，鼠标的X坐标 73 downY = e.clientY; //鼠标按下时，鼠标的Y坐标 74 75 //绑定鼠标移动事件 76 $("body").bind("mousemove",function(es){ 77 78 endX = es.clientX - downX + startX; //X坐标移动 79 endY = es.clientY - downY + startY; //Y坐标移动 80 81 //最大最小限制 82 if(endX > maxX) 83 { 84 endX = maxX; 85 } else if(endX < 0) 86 { 87 endX = 0; 88 } 89 if(endY > maxY) 90 { 91 endY = maxY; 92 } else if(endY < 0) 93 { 94 endY = 0; 95 } 96 97 $('#'+idzt[n]).css("top",endY+"px"); 98 $('#'+idzt[n]).css("left",endX+"px"); 99 100 window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty(); //取消选中文本 101 102 }); 103 }); 104 //鼠标按键抬起，释放移动事件 105 $("body").bind("mouseup",function(){ 106 107 $("body").unbind("mousemove"); 108 109 }); 110 } 111 112 //关闭窗口 113 $(".close").click(function(){ 114 115 var m = this.getAttribute("bs"); //找标识 116 $('#'+idzt[m]).remove(); //移除弹窗 117 $('#zz').remove(); //移除遮罩 118 119 }) 120 121 x++; //标识增加 122 123 }
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 }
