jQuery实现的自定义弹出层效果实例详解

本文实例讲述了jQuery实现的自定义弹出层效果。分享给大家供大家参考，具体如下：
dialog.css：

#DialogBySHFLayer{width:100%;height:100%;left:0;top:0;position:fixed;z-index:500;background-color:#333333;filter:alpha（Opacity=40）;-moz-opacity:0.4;opacity: 0.4;}/*弹出的提示框*/#DialogBySHF{position:absolute;border-radius:3px;box-shadow:0 0 8px rgba（0, 0, 0, .8）;background-color:#f2f2f2;z-index:600;}#DialogBySHF #Title{margin:0;width:100%;height:35px;background-color:#ffa500;color:#FFFFFF;font-family: "microsoft yahei";font-size:18px;text-align:center;cursor:move;line-height:35px;border-radius:3px 3px 0 0;-moz-user-select:none;-webkit-user-select:none;user-select:none;}#DialogBySHF #Close{position:absolute;right:7px;top:6px;height:21px;line-height:21px;width:21px;cursor:pointer;display:block;border:1px solid #da8e02;box-shadow:0 0 4px rgba（255, 255, 255, .9）;border-radius:3px;}#DialogBySHF #Container{padding:0px 5px 5px 5px;/*width:390px;height:355px;*/}#DialogBySHF #Container table,#DialogBySHF #Container iframe{width:100%;height:100%;}#DialogBySHF #Container table td{vertical-align:middle;}#DialogBySHF #Container table #TipLine{padding:0 30px;font-family: "microsoft yahei";}#DialogBySHF #Container table #BtnLine{height:60px;text-align:center;}#DialogBySHF #Container table #BtnLine input{margin:6px 11px;-moz-user-select: none;background-color:#F5F5F5;background-image: -moz-linear-gradient（center top , #F5F5F5, #F1F1F1）;background-image:-ms-linear-gradient（rgb（245, 245, 245）, rgb（241, 241, 241））;background-image:-webkit-linear-gradient（top,#f8f8f8,#f1f1f1）;border:1px solid rgba（0,0,0,0.1）;*border:1px solid #DDDDDD;border:1px solid #DDDDDD;border-radius:2px;font-family: "microsoft yahei";color:#666666;cursor:default;font-size:12px;font-weight:bold;height:29px;line-height:27px;min-width:54px;padding:0 8px;text-align:center;}#DialogBySHF #Container table #BtnLine input:hover{background-color: #F8F8F8;background-image: -moz-linear-gradient（center top , #F8F8F8, #F1F1F1）;border: 1px solid #C6C6C6;box-shadow: 0 1px 1px rgba（0, 0, 0, 0.1）;color: #333333;}#DialogBySHF #Container table #BtnLine input:focus{border: 1px solid #4D90FE;outline: medium none;}

dialog.js：

;（function （$） {//默认参数var PARAMS;var DEFAULTPARAMS = { Title: "弹出层的标题", Content: "", Width: 400, Height: 300, URL: "", ConfirmFun: new Object, CancelFun: new Object };var ContentWidth = 0;var ContentHeight = 0;$.DialogBySHF = {//弹出提示框Alert: function （params） {Show（params, "Alert"）;},//弹出确认框Confirm: function （params） { Show（params, "Confirm"）; },//弹出引用其他URL框Dialog: function （params） { Show（params, "Dialog"） },//关闭弹出框Close: function （） {$（"#DialogBySHFLayer,#DialogBySHF"）.remove（）;}};//初始化参数function Init（params） {if （params ！= undefined && params ！= null） {PARAMS = $.extend（{},DEFAULTPARAMS, params）;}ContentWidth = PARAMS.Width - 10;ContentHeight = PARAMS.Height - 40;};//显示弹出框function Show（params, caller） {Init（params）;var screenWidth = $（window）.width（）;var screenHeight = $（window）.height（）;//在屏幕中显示的位置（正中间）var positionLeft = （screenWidth - PARAMS.Width） / 2 + $（document）.scrollLeft（）;var positionTop = （screenHeight - PARAMS.Height） / 2 + $（document）.scrollTop（）;var Content = [];Content.push（"<div id="DialogBySHFLayer"></div>"）;Content.push（"<div id="DialogBySHF" style="width:" + PARAMS.Width + "px;height:" + PARAMS.Height + "px;left:" + positionLeft + "px;top:" + positionTop + "px;">"）;Content.push（"<div id="Title"><span>" + PARAMS.Title + "</span><span id="Close">✕</span></div>"）;Content.push（"<div id="Container" style="width:" + ContentWidth + "px;height:" + ContentHeight + "px;">"）;if （caller == "Dialog"） {Content.push（"<iframe frameborder="0" marginwidth="0" marginheight="0" src="" + PARAMS.URL + "" ></iframe>"）;}else {var TipLineHeight = ContentHeight - 60;Content.push（"<table>"）;Content.push（"<tr><td id="TipLine" style="height:" + TipLineHeight + "px;">" + PARAMS.Content + "</td></tr>"）;Content.push（"<tr>"）;Content.push（"<td id="BtnLine">"）;Content.push（"<input type="button" id="btnDialogBySHFConfirm" value="确定" />"）;if （caller == "Confirm"） {Content.push（"<input type="button" id="btnDialogBySHFCancel" value="取消" />"）;}Content.push（"</td>"）;Content.push（"</tr>"）;Content.push（"</table>"）;}Content.push（"</div>"）;Content.push（"</div>"）;$（"body"）.append（Content.join（"
"））;SetDialogEvent（caller）;}//设置弹窗事件function SetDialogEvent（caller） {//添加按钮关闭事件$（"#DialogBySHF #Close"）.click（function （） { $.DialogBySHF.Close（）;}）; //添加ESC关闭事件$（window）.keydown（function（event）{var event = event||window.event;if（event.keyCode===27）{$.DialogBySHF.Close（）;}}）;//添加窗口resize时调整对话框位置$（window）.resize（function（）{var screenWidth = $（window）.width（）;var screenHeight = $（window）.height（）;var positionLeft = parseInt（（screenWidth - PARAMS.Width） / 2+ $（document）.scrollLeft（））;var positionTop = parseInt（（screenHeight - PARAMS.Height） / 2+ $（document）.scrollTop（））;$（"#DialogBySHF"）.css（{"top":positionTop+"px","left":positionLeft+"px"}）;}）;$（"#DialogBySHF #Title"）.DragBySHF（$（"#DialogBySHF"））;if （caller ！= "Dialog"） {$（"#DialogBySHF #btnDialogBySHFConfirm"）.click（function （） {$.DialogBySHF.Close（）;if （$.isFunction（PARAMS.ConfirmFun）） {PARAMS.ConfirmFun（）;}}）}if （caller == "Confirm"） {$（"#DialogBySHF #btnDialogBySHFCancel"）.click（function （） {$.DialogBySHF.Close（）;if （$.isFunction（PARAMS.CancelFun）） {PARAMS.CancelFun（）;}}）}}}）（jQuery）;//拖动层（function （$） {$.fn.extend（{DragBySHF: function （objMoved） {return this.each（function （） {//鼠标按下时的位置var mouseDownPosiX;var mouseDownPosiY;//移动的对象的初始位置var objPosiX;var objPosiY;//移动的对象var obj = $（objMoved） == undefined ? $（this） : $（objMoved）;//是否处于移动状态var status = false;//鼠标移动时计算移动的位置var tempX;var tempY;$（this）.mousedown（function （e） {status = true;mouseDownPosiX = e.pageX;mouseDownPosiY = e.pageY;objPosiX = obj.css（"left"）.replace（"px", ""）;objPosiY = obj.css（"top"）.replace（"px", ""）;}）.mouseup（function （） {status = false;}）;$（"body"）.mousemove（function （e） {if （status） {tempX = parseInt（e.pageX） - parseInt（mouseDownPosiX） + parseInt（objPosiX）;tempY = parseInt（e.pageY） - parseInt（mouseDownPosiY） + parseInt（objPosiY）;obj.css（{ "left": tempX + "px", "top": tempY + "px" }）;}//判断是否超出窗体//计算出弹出层距离右边的位置var dialogRight = parseInt（$（window）.width（））-（parseInt（obj.css（"left"））+parseInt（obj.width（）））;//计算出弹出层距离底边的位置var dialogBottom = parseInt（$（window）.height（））-（parseInt（obj.css（"top"））+parseInt（obj.height（）））;var maxLeft = $（window）.width（）-obj.width（）;var maxTop = $（window）.height（）-obj.height（）;if（parseInt（obj.css（"left"））<=0）{ obj.css（"left","0px"）;}if（parseInt（obj.css（"top"））<=0）{obj.css（"top","0px"）;}if（dialogRight<=0）{obj.css（"left",maxLeft+"px"）;}}）.mouseup（function （） {status = false;}）.mouseleave（function （） {status = false;}）;}）;}}）}）（jQuery）;

demo.html：

<！DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"><title>新建H5模板</title><link rel="stylesheet" href="css/dialog.css" /><style>input[type="button"] {margin: 100px 20px;padding: 10px;}</style><script type="text/javascript" src="js/jquery-1.10.1.min.js"></script><script type="text/javascript" src="js/dialog.js"></script></head><body><center><input type="button" value="弹出提示框" id="btnAlert" /><input type="button" value="弹出确认框" id="btnConfirm" /><input type="button" value="弹出iframe" id="btnDialog" /></center><script type="text/javascript">$（function（） {$（"#btnAlert"）.click（function（） {$.DialogBySHF.Alert（{Width: 350,Height: 200,Title: "弹出提示框",Content: "你好，你选择的内容是空白的",ConfirmFun: test}）;}）$（"#btnConfirm"）.click（function（） {$.DialogBySHF.Confirm（{Width: 350,Height: 200,Title: "弹出确认框",Content: "你确定要删除这条内容吗",ConfirmFun: test,CancelFun: testCancel}）;}）$（"#btnDialog"）.click（function（） {$.DialogBySHF.Dialog（{Width: 1024,Height: 500,Title: "新开一个窗口",URL: "http://www.jb51.net"}）;}）}）function test（） {$.DialogBySHF.Alert（{Width: 350,Height: 200,Title: "确认后执行方法",Content: "确认后执行的方法"}）;}function testCancel（） {$.DialogBySHF.Alert（{Width: 350,Height: 200,Title: "取消后执行方法",Content: "取消后执行的方法"}）;}</script></body></html>

效果图：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格（table）操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。