JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮

jquery+css3实现的经典弹出层效果⽰例本⽂实例讲述了jquery+css3实现的弹出层效果。

分享给⼤家供⼤家参考，具体如下：可能出现的情况1）⼀列都有，按顺序弹出对应的弹出层2）只有单个⼀个弹出层3）不按顺序不按规律随机弹出层jquery 弹出层解决第⼀种情况参考资料引⼊jqueryJS代码这⾥关闭⽤的css3效果实现<script type="text/javascript">var w,h,className;function getSrceenWH(){w = $(window).width();h = $(window).height();$('#dialogBg').width(w).height(h);}window.onresize = function(){getSrceenWH();}$(window).resize();$(function(){getSrceenWH();//显⽰弹框$('.solution_class a').click(function(){className = $(this).attr('class');$('#dialogBg').fadeIn(300);$('#dialog').removeAttr('class').addClass('animated '+className+'').fadeIn();});//关闭弹窗$('.claseDialogBtn,#dialogBg').click(function(){$('#dialogBg').fadeOut(300,function(){$('#dialog').addClass('bounceOutUp').fadeOut();});});});</script>HTML<div id="dialogBg"></div><div id="dialog" class="animated"><div class="dialogTop"><a href="javascript:;" rel="external nofollow" class="claseDialogBtn">关闭</a></div></div>css/*遮罩层*/.animated{-webkit-animation-duration:1.4s;animation-duration:1.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);transform:scale(.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}100%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown {0% {opacity: 0;-webkit-transform: translateY(-2000px);transform: translateY(-2000px);}60% {opacity: 1;-webkit-transform: translateY(30px);transform: translateY(30px);}80% {-webkit-transform: translateY(-10px);transform: translateY(-10px);}100% {-webkit-transform: translateY(0);transform: translateY(0);}}@keyframes bounceInDown {0% {opacity: 0;-webkit-transform: translateY(-2000px);-ms-transform: translateY(-2000px);transform: translateY(-2000px);}60% {opacity: 1;-webkit-transform: translateY(30px);-ms-transform: translateY(30px);transform: translateY(30px);}80% {-webkit-transform: translateY(-10px);-ms-transform: translateY(-10px);transform: translateY(-10px);}100% {-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}}.bounceInDown {-webkit-animation-name: bounceInDown;animation-name: bounceInDown;}@-webkit-keyframes bounceOutUp {0% {-webkit-transform: translateY(0);transform: translateY(0);}20% {opacity: 1;-webkit-transform: translateY(20px);transform: translateY(20px);}100% {opacity: 0;-webkit-transform: translateY(-2000px);transform: translateY(-2000px);}}@keyframes bounceOutUp {0% {-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}20% {opacity: 1;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}100% {opacity: 0;-webkit-transform: translateY(-2000px);-ms-transform: translateY(-2000px);transform: translateY(-2000px);}}.bounceOutUp {-webkit-animation-name: bounceOutUp;animation-name: bounceOutUp;}@-webkit-keyframes rollIn {0% {opacity: 0;-webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg);}100% {opacity: 1;-webkit-transform: translateX(0px) rotate(0deg);transform: translateX(0px) rotate(0deg);}}@keyframes rollIn {0% {opacity: 0;-webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg);transform: translateX(-100%) rotate(-120deg);}100% {opacity: 1;-webkit-transform: translateX(0px) rotate(0deg);-ms-transform: translateX(0px) rotate(0deg);transform: translateX(0px) rotate(0deg);}}.rollIn {-webkit-animation-name: rollIn;animation-name: rollIn;}@-webkit-keyframes flipInX {0% {-webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg);opacity: 0;}40% {-webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg);}70% {-webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg);}100% {-webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg);opacity: 1;}}@keyframes flipInX {0% {-webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg);transform: perspective(400px) rotateX(90deg);opacity: 0;}40% {-webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg);transform: perspective(400px) rotateX(-10deg);}70% {-webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg);transform: perspective(400px) rotateX(10deg);}100% {-webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg);transform: perspective(400px) rotateX(0deg);opacity: 1;}}.flipInX {-webkit-backface-visibility: visible !important;-ms-backface-visibility: visible !important;backface-visibility: visible !important;-webkit-animation-name: flipInX;animation-name: flipInX;}/*------------------- 华丽分割线 -----------------------*//*------------------- 华丽分割线 -----------------------*/#dialogBg {width: 100%;height: 100%;background-color: #000000;opacity: .8;filter: alpha(opacity=60);position: fixed;top: 0;left: 0;z-index: 9999;display: none;}#dialog {width: 800px;height: 600px;margin: 0 auto;display: none;background-color: #ffffff;position: fixed;top: 50%;left: 50%;margin: -300px 0 0 -400px;z-index: 10000;border: 1px solid #ccc;border-radius: 10px;-webkit-border-radius: 10px;box-shadow: 3px 2px 4px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 3px 2px 4px rgba(0, 0, 0, 0.2);}.dialogTop {width: 90%;margin: 0 auto;border-bottom: 1px dotted #ccc;letter-spacing: 1px;padding: 10px 0;text-align: right;}.dialogIco {width: 50px;height: 50px;position: absolute;top: -25px;left: 50%;margin-left: -25px;}.editInfos {padding: 15px 0;}.editInfos li {width: 90%;margin: 8px auto auto;text-align: center;}.ipt {border: 1px solid #ccc;padding: 5px;border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 0 3px #ccc inset;-webkit-box-shadow: 0 0 3px #ccc inset;margin-left: 5px;}.ipt:focus {outline: none;border-color: #66afe9;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);}.submitBtn{width:90px;height:30px;line-height:30px;font-family:"微软雅⿊","microsoft yahei";cursor:pointer;margin-top:10px;display:inline-block;border-radius:5px;-webkit-border-radius:5px;text-align:center;background-color:#428bca;color:#fff;box-shadow: 0 -3px 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家jQuery程序设计有所帮助。

JQuery中的dialog使⽤介绍初始化参数对于 dialog 来说，⾸先需要进⾏初始化，在调⽤ dialog 函数的时候，如果没有传递参数，或者传递了⼀个对象，那么就表⽰在初始化⼀个对话框。

没有参数，表⽰按照默认的设置初始化对话框，在当前最新版本的 jQuery UI 1.8.9 中， dialog ⽀持下列属性。

autoOpen 初始化之后，是否⽴即显⽰对话框，默认为 truemodal 是否模式对话框，默认为 falsecloseOnEscape 当⽤户按 Esc 键之后，是否应该关闭对话框，默认为 truedraggable 是否允许拖动，默认为 trueresizable 是否可以调整对话框的⼤⼩，默认为 truetitle 对话框的标题，可以是 html 串，例如⼀个超级链接。

position ⽤来设置对话框的位置，有三种设置⽅法1. ⼀个字符串，允许的值为 'center', 'left', 'right', 'top', 'bottom'. 此属性的默认值即为 'center'，表⽰对话框居中。

2. ⼀个数组，包含两个以像素为单位的位置，例如，var dialogOpts = { position: [100, 100] };3. ⼀个字符串组成的数组，例如， ['right','top']，表⽰对话框将会位于窗⼝的右上⾓。

var dialogOpts = { position: ["left", "bottom"] };⼀组关于尺⼨的属性，以像素为单位。

width 宽度, 默认 300height ⾼度，默认 'auto'minWidth 最⼩宽度，默认 150minHeight 最⼩⾼度，默认 150maxWidth 最⼤宽度maxHeight 最⼤⾼度还有关于关闭的效果hide 当对话框关闭时的效果，默认为 null, 例如， hide: 'slide'show 当对话框打开时的效果。

jQuery UI目前的版本已经更新到了1.8.7。

个人感觉和easyui相比起来，jQuery UI在界面的美观程度和可定制型更强一些。

所以再次将一些jQuery UI组件的用法说明一下，方便日后查阅。

也方面没接触jQuery UI的人能早日使用jQuery UI套件(一)首先来说jQuery UI使用频率较高dialog组件：dialog就是我们常说的弹出层，应用还是比较广泛的，比如：可以使用弹出层做登录、注册和消息提示等功能下面来详细说说dialog的使用方法在官方提供的官方文档和示例中有六种形式的dialog,但是前五种都是大同小异，包括在编写代码方面也仅仅是多设置两个属性而已，没什么太大的不同，先来看看使用jQuery UI组件的时候需要那些前期贮备工作。

首先将需要依赖的js文件导入到你的页面中。

需要依赖的文件如下：jquery-ui-1.8.7.custom.css这个是jQuery UI套件的CSS样式表，demos.css这个是jQuery UIdemo中用到的CSS样式，因为我用到了这些样式所以将它导入进来，如果大家不需要可以不导这个文件，jquery-1.4.4.min.js这个不用说了吧，jQuery的核心文件，没有它一切工作都无法开展。

切记一点：一定要在引入其他的js文件之前引入jquery-1.4.4.min.js文件，别问为什么，懂点jQuery的人都能想的到。

jquery-ui-1.8.7.custom.min.js这个是jQueryUI的核心js文件，也是必须的。

有了上述的引用后就可以在你的页面中使用jQuery UI了。

先看一个超级简单的DEMO：<div id="dialog" title="basic dialog"><p>这是一个采用默认样式的对话框</p></div>在页面中加入上边的一行代码，然后加入一个script标签对，在脚本写如下代码：$(function(){$("#dialog").dialog();});打开你的页面看一下吧，如果没什么意外你会看到一个类似这样的对话框简单吧，这就是一个弹出层，其中div的title被当作了dialog的title,右上角有关闭的xx，右下角则可以拖拽改变大小这就是一个默认的dialog，虽然我们没有为它指定高度和宽度，但是它有默认的值，在我们没有设定情况下dialog默认会弹出在屏幕的中央，大小也是有默认值的，可以改变大小，显示关闭按钮，这都是默认的样式，那么如果我们想自己定制一下dialog，不想让他这样显示该如何做？下面介绍一些属性和方法来改变一下这个dialog，用到的属性如下：autoOpen,modal,buttons，根据这些属性我们来定制一个不会自动打开(当点击按钮或者通过其他的事件来触发弹出dialog的事件)，并且带有遮罩(模式窗体)和按钮的dialogbuttons属性是一个复合属性，使用形式如下：buttons{ok:function(){点击按钮执行的事件},cancel:function(){点击按钮执行的事件}}其中ok是按钮显示的文本，而function是点击按钮后执行的事件。

jQuery实现单击按钮遮罩弹出对话框效果（1）本⽂实例为⼤家分享了jQuery实现单击按钮遮罩弹出对话框的具体代码，供⼤家参考，具体内容如下看到⽹上⼀位⼤神的代码后，⼤概进⾏了注释，调试了⼀下页⾯以后感觉不错，留作以后使⽤。

主要⽤到了：/jquery-1.10.2.min.js代码如下：<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>遮罩弹出窗⼝</title><script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script><style type="text/css">/* CSS Document */@CHARSET "UTF-8";*{margin: 0px;padding: 0px;}.divShow{/*设置字体⾼度div的⾼度背景⾊div宽度左内距为10px*/line-height: 50px;height: 60px;background-color: #dddddd;width: 300px;padding-left: 15px;}.dialog{/*设置宽度设置边框宽度+颜⾊+引display：none表⽰影藏z-index：//保证该层在最上⾯显⽰*/width: 360px;border: 10px #fff solid;position: absolute;display: none;z-index: 101;}.dialog .title{/*设置背景⾊设置内边距设置字体颜⾊设置字体加粗*/background:#fbaf15;padding: 10px;color: #fff;font-weight: bold;}.dialog .title img{/*设置元素向右浮动*/float:right;}.dialog .content{/*设置背景⾊设置内边距设置⾼度*/background: #fff;padding: 25px;height: 60px;}.dialog .content img{float: left;}.dialog .content span{float: left;padding: 10px;}.dialog .bottom{/*设置⽂本向右对齐设置内边局上右下左*/text-align: right;padding: 10 10 10 0;background: #eee;}.mask{/*⾥⾯有个display：no；开始的时候看不到这个div的效果它主要作⽤是封闭整个页⾯*/width: 100%;height: 100%;background: #000;position: absolute;top: 0px;left: 0px;display: none;z-index: 100;}.btn{border: #666 1px solid;width: 65px;}</style><script type="text/javascript">// JavaScript Document$(function(){//绑定删除按钮的触发事件$(document).ready(function(){//按下按钮触发操作$("#button1").click(function(){//设置 div 元素的不透明级别：透明度取值(取值范围[0.0,1.0]) $(".mask").css("opacity","0.3").show();//制作对话框showDialog();//展现css的特效$(".dialog").show();});//当页⾯窗⼝⼤⼩改变时触发的事件$(window).resize(function(){if(!$(".dialog").is(":visible")){return;}showDialog();});//注册关闭图⽚单击事件$(".title img").click(function(){//隐藏效果$(".dialog").hide();$(".mask").hide();});//取消按钮事件$("#noOk").click(function(){$(".dialog").hide();$(".mask").hide();});//确定按钮事假$("#ok").click(function(){$(".dialog").hide();$(".mask").hide();if($("input:checked").length !=0){//注意过滤器选择器中间不能存在空格$("input :checked")这样是错误的$(".divShow").remove();//删除某条数据}});});/** 根据当前页⾯于滚动条的位置，设置提⽰对话框的TOP和left*/function showDialog(){var objw=$(window);//获取当前窗⼝var objc=$(".dialog");//获取当前对话框var brsw=objw.width(); //获取页⾯宽度var brsh=objw.height(); //获取页⾯⾼度var sclL=objw.scrollLeft(); //获取页⾯左滑动条信息var sclT=objw.scrollTop();var curw=objc.width(); //获取对话框宽度var curh=objc.height(); //获取对话框⾼度var left=sclL+(brsw -curw)/2; //计算对话框居中时的左边距var top=sclT+(brsh-curh)/2; //计算对话框居中时的上边距objc.css({"left":left,"top":top}); //设置对话框居中}</script></head><body><div class="divShow"><input type="checkbox" id="chexkBox1"> <a href="#">这是⼀条可以删除的记录</a> <input id="button1" type="button" value="删除" class="btn"></div><div class="mask"></div><div class="dialog"><div class="title"><img alt="点击可以关闭" src="" width="20px" height="20px;">删除时提⽰</div><div class="content"><img alt="" src="" width="60px" height="60px"><span>你真的要删除这条记录吗？</span></div><div class="bottom"><input type="button" id="ok" value="确定" class="btn"><input type="button" id="noOk" value="取消" class="btn"></div></div></body></html>展⽰⼀张在⾕歌上的效果：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

Jquery中dialog属性⼩记复制代码代码如下:$('#dialogDiv').dialog({hide:true, //点击关闭是隐藏,如果不加这项,关闭弹窗后再点就会出错.autoOpen:false,height:380,width:800,modal:true, //蒙层（弹出会影响页⾯⼤⼩）title:'开标⼈',overlay: {opacity: 0.5, background: "black" ,overflow:'auto'},buttons:{'确定':function(){// 处理⽅法 addUser();},'取消':function(){//关闭当前Dialog$(this).dialog("close");}}});$('#addItems').click(function(){loadPage('buildOpeningGroupAddOpering.htm','#dialogDiv'); //dialog记取页⾯//$(window.parent.document).find("#projectSpaceContent .show").height(600)//调整当前Iframe⾼度$('#dialogDiv').data('title.dialog', '新增开标⼈').dialog('open'); //修改标题return false;})function loadPage(path,id) {$.get(path, function(data) {// data = data.replace(/<script.*>.*<\/script>/ig,""); //移除script 标签data = data.replace(/<\/?link.*>/ig,""); //移除 link 标签data = data.replace(/<\/?html.*>/ig,""); //移除 html 标签data = data.replace(/<\/?body.*>/ig,""); //移除 body 标签data = data.replace(/<\/?head.*>/ig,""); //移除 head 标签data = data.replace(/<\/?!doctype.*>/ig,""); //移除 doctype 标签data = data.replace(/<title.*>.*<\/title>/ig,""); //移除 title 标签$(id).empty().html(data);//清空contentMain内容并加载html});}//为弹出层增加关闭按钮$('.ui-dialog-buttonpane').show().empty();$('<button>关闭</button>').click(function(){$("#dialogDiv").dialog('close');return false;}).appendTo('.ui-dialog-buttonpane');还是先看例⼦吧。

vant popup实现原理
VantPopup是一个弹出框组件，可以用于实现各种弹出框效果。

它是基于Vue.js和CSS3实现的，具有高度的可定制性和易用性。

下面是Vant Popup的实现原理。

1、弹出框组件的基本结构
Vant Popup的基本结构可以分为三个部分：遮罩层、弹出框和关闭按钮。

其中，遮罩层用于遮盖背景，让用户无法操作背景；弹出框用于显示内容；关闭按钮用于关闭弹出框。

2、弹出框的显示和隐藏
弹出框的显示和隐藏是Vant Popup实现的核心功能。

当用户点击弹出框按钮时，弹出框会从屏幕边缘滑动出来并显示在屏幕中央；当用户点击关闭按钮时，弹出框会从屏幕中央滑动到屏幕边缘并隐藏不见。

3、遮罩层的实现
遮罩层是Vant Popup的重要组成部分，用于遮盖背景并阻止用户进行操作。

Vant Popup使用CSS3动画实现了遮罩层的显示和隐藏。

具体来说，当弹出框出现时，遮罩层会从完全透明变为半透明；当弹出框隐藏时，遮罩层会从半透明变为完全透明。

4、弹出框的动画效果
为了使Vant Popup更加生动和具有交互性，它还实现了弹出框的动画效果。

具体来说，当弹出框出现时，它会从屏幕边缘滑动到屏幕中央，并带有缓动效果；当弹出框隐藏时，它会从屏幕中央滑动到
屏幕边缘，并同样带有缓动效果。

总结
以上就是Vant Popup的实现原理。

通过使用Vue.js和CSS3技术，Vant Popup实现了弹出框的显示和隐藏、遮罩层的实现、以及弹出框的动画效果。

这使得Vant Popup成为一个非常强大和易用的弹出框组件。

JS使⽤遮罩实现点击某区域以外时弹窗的弹出与关闭功能⽰例本⽂实例讲述了JS使⽤遮罩实现点击某区域以外时弹窗的弹出与关闭功能。

分享给⼤家供⼤家参考，具体如下：HTML部分：<div id="div">点击除开div的区域可以弹出弹窗</div><div id="cover"></div><div id="box">点击除开div和弹窗的区域可以关闭弹窗</div>CSS部分：#div{/*设置z-index属性必须设置position:relative或absolute*/position:relative;/*设置div位于遮罩的上⽅*/z-index:2;width:300px;height:200px;border:1px solid grey;}#cover{position:fixed;width:100%;height:100%;left:0;top:0;/*设置遮罩位于div的下⽅*/z-index:1;}#box{border:1px solid grey;/*当弹窗显⽰时，屏幕滚动时，弹窗始终保持位置固定在屏幕正中，不随屏幕滚动⽽变化位置*/position:fixed;width:400px;height:300px;left:50%;top:50%;/*配合left:50%和top:50%属性使得浮出层的中⼼默认在屏幕正中，margin-top为height的⼀半，margin-left为width的⼀半*/margin:-150px 0 0 -200px;/*设置弹窗位于遮罩的上⽅*/z-index:2;/*开始时隐藏弹窗*/display:none;}JavaScript部分：document.getElementById("cover").onclick = function() {if (document.getElementById("box").style.display == "block") {document.getElementById("box").style.display = "none";document.getElementById("cover").style.background = "white";}else {document.getElementById("box").style.display = "block";document.getElementById("cover").style.background = "#aaa";}}更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。

Jquery弹出窗⼝今天讲了Jquery的弹出窗⼝的组成和⽤法：先把引⽤⽂件的代码写好：// 每个弹窗的标识var x =0;var idzt = new Array();var Window = function(config){//ID不重复idzt[x] = "zhuti"+x; //弹窗ID//初始化，接收参数this.config = {width : config.width || 300, //宽度height : config.height || 200, //⾼度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, //是否移动};//加载弹出窗⼝var w = ($(window).width()-this.config.width)/2;var h = ($(window).height()-this.config.height)/2;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>"; $("body").append(nr);//加载弹窗标题var content ="<div id='title"+x+"' class='title' bs='"+x+"'>"+this.config.title+"<div id='close"+x+"' class='close' bs='"+x+"'>×</div></div>";//加载弹窗内容var nrh = this.config.height - 75;content = content+"<div id='content"+x+"' bs='"+x+"' class='content' style='width:100%; height:"+nrh+"px;'>"+this.config.content+"</div>";//加载按钮content = content+"<div id='btnx"+x+"' bs='"+x+"' class='btnx'>"+this.config.buttons+"</div>";//将标题、内容及按钮添加进窗⼝$('#'+idzt[x]).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).height()-this.config.height;var minX = 0,minY = 0;//窗⼝移动if(this.config.isDrag){//⿏标移动弹出窗$(".title").bind("mousedown",function(e){var n = $(this).attr("bs"); //取标识//使选中的到最上层$(".zhuti").css("z-index",3);$('#'+idzt[n]).css("z-index",4);//取初始坐标var endX = 0, //移动后X坐标endY = 0, //移动后Y坐标startX = parseInt($('#'+idzt[n]).css("left")), //弹出层的初始X坐标startY = parseInt($('#'+idzt[n]).css("top")), //弹出层的初始Y坐标downX = e.clientX, //⿏标按下时，⿏标的X坐标downY = e.clientY; //⿏标按下时，⿏标的Y坐标//绑定⿏标移动事件$("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;}$('#'+idzt[n]).css("top",endY+"px");$('#'+idzt[n]).css("left",endX+"px");window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty(); //取消选中⽂本});});//⿏标按键抬起，释放移动事件$("body").bind("mouseup",function(){$("body").unbind("mousemove");});}//关闭窗⼝$(".close").click(function(){var m = this.getAttribute("bs"); //找标识$('#'+idzt[m]).remove(); //移除弹窗$('#zz').remove(); //移除遮罩})x++; //标识增加}这个JS⽂件把弹出窗⼝的内容，样式，位置，按钮，以及遮罩层都做了处理，在引⽤前好好看看⾥⾯的代码，最好都能弄懂，⾥⾯也做了详细的注释，希望可以帮的你。

jQuery实现点击任意位置弹出层外关闭弹出层效果
在之前做项⽬的时候经常会在主页⾯上点击某个按钮，右侧弹出⼀个div输出对应内容的详细信息。

此时，我是希望在⿏标点击弹出层外的时候关闭该弹出层，主要思想就是：
找到⿏标点击的那个元素
判断这个元素是否在指定区域内，其实就是判断它的⽗元素是不是弹出层
如果不是就对弹出层进⾏hide，如果是就不进⾏任何操作
具体实现
该代码需要使⽤jQuery,代码如下：
$(document).mousedown(function(e){
if($(e.target).parent("#info").length==0){
$("#info").hide();
}
})
$(document).mousedown(function(e){})
$(document)就是获取整个⽹页⽂档对象，类似于原⽣的window.ducument
mousedown是⿏标事件，是指当⿏标指针移动到元素上⽅并按下⿏标按键时，类似的事件还有：
mouseup:当在元素上放松⿏标按钮时
mouseover：当⿏标指针位于元素上⽅时
$(e.target)
$(e.target)表⽰获取点击事件的元素。

parent()
$(e.target).parent("#info").length是获取当前点击事件元素带有id为info的⽗元素。

以上所述是⼩编给⼤家介绍的jQuery实现点击任意位置弹出层外关闭弹出层效果，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

在此也⾮常感谢⼤家对⽹站的⽀持！。

JS简单实现点击按钮或⽂字显⽰遮罩层的⽅法本⽂实例讲述了JS简单实现点击按钮或⽂字显⽰遮罩层的⽅法。

分享给⼤家供⼤家参考，具体如下：运⾏效果图如下：完整代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>点击⽂字弹出⼀个DIV层窗⼝代码</title><meta charset="urf-8"/><style>.black_overlay{display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color: black;z-index:1001;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=88);}.white_content {display: none;position: absolute;top: 25%;left: 25%;width: 55%;height: 55%;padding: 20px;border: 10px solid orange;background-color: white;z-index:1002;overflow: auto;}</style></head><body><p>⽰例弹出层：<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这⾥</a></p><div id="light" class="white_content">这是⼀个层窗⼝⽰例程序. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">点这⾥关闭本窗⼝</a></div> <div id="fade" class="black_overlay"></div></body></html>更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。

本文由我司收集整编，推荐下载，如有疑问，请与我司联系jquery 弹窗（系统提示框）效果2016/11/10 0 !DOCTYPE html html lang=“en”head meta charset=“UTF-8”script src=“js/jquery-1.11.1.js”/script title 弹窗效果/title style *{ margin: 0;padding: 0;list-style: none} .mask{background-color:rgba(0,0,0,0.2); width:100%; height:100%;position:fixed;top:0;left:0;} .prompt_box{width:400px;height:200px;backgro und:#ffffff;border-radius:6px; position:fixed;top:25%; left:50%; margin-left:- 200px;overflow: hidden;} .prompt_box .prompt_title{height:40px;line- height:40px;padding-left:20px;border-bottom:2px solid#1a9ebf;background:#e6e6e6;position: relative;} .prompt_box .prompt_title h3{font- size:16px;color: #333333; margin- top:0;} .prompt_box .prompt_cancel{width:24px;height:24px;background: url(“img/cancel.png”)no-repeat;position: absolute;right:0;top:0;} .prompt_box .prompt_cont{position: relative;height:158px;} .prompt_box .prompt_cont .prompt_text{line- height:140px;padding-left:100px;} .prompt_box .prompt_cont .prompt_sure{position: absolute;right:20px;bottom:34px; width:50px;height: 26px;background:#1a9ebf;border- radius:5px;color:#ffffff; font-size: 14px;line-height:26px;text-align: center;} .hide{display:none;} .show{display:block;} /style /head body input type=“button”value=“按钮”id=“btn”div div div h3 系统提示/h3 span /span/div div p 输入有误，请重新输入！/p span 确定/span /div /div /div script $(function () { (function () { //////////////////////////弹窗效果//////////////////////////////// $(‘#btn’).click(function() { $(‘.prompt_text’).text(‘输入有误，请重新输入！’); $(‘.mask’).removeClass(‘hide’);}) $(‘.prompt_sure,.prompt_cancel’).click(function() { $(‘.mask’).addClass(‘hide’); }) })(); }); /script /body /html 效果图显示：tips:感谢大家的阅读，本文由我司收集整编。

Jquery点击按钮显⽰和隐藏层的代码代码：复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title></title><script type="text/javascript" src="../Javascript/jquery-1.6.js"></script><style type="text/css">#choice_list_district{ height:50px;}#tab td{cursor:pointer;}</style><script type="text/javascript">$(function () {//绑定事件处理$("#choice_list_district a").click(function (e) {if ($("#divObj").css("display") == "none") {e.stopPropagation();//设置弹出层位置var offset = $(e.target).offset();//设置弹出层位置在点击的下⾯$("#divObj").css({ top: offset.top + $(e.target).height() + "px", left: offset.left });$("#divObj").show();}else {$("#divObj").hide();}});//单击空⽩区域隐藏弹出层$(document).click(function (event) { $("#divObj").hide(); });//单击弹出层则⾃⾝隐藏//$("#divObj").click(function (event) { $("#divObj").hide(speed) });$("#tab tr td").click(function (event) {$("#aaa").val($(this).html());});});</script></head><body><form id="form1" runat="server"><div><div id="choice_list_district"><a href="#">出来层</a></div><div id="divObj" style="position: absolute; width:200px; height:200px; background:blue; border:1px solid block; display:none; z-index:9999;"><table id="tab"><tr><td>aaa</td></tr><tr><td>bbb</td></tr></table></div><div style="position:absolute; top:200px; left:200px;"><input type="text" id="aaa" /></div></div></form> </body> </html>。

jQuery超简单遮罩层实现⽅法⽰例本⽂实例讲述了jQuery超简单遮罩层实现⽅法。

分享给⼤家供⼤家参考，具体如下：在开发中，为了避免⼆次提交，遮罩层的运⽤越来越普遍看了很多代码，下⾯跟⼤家分享⼀下我认为最简单的遮罩层实现⽅式：1.样式如下设置：CSS代码：<style type="text/css">.mask {position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;z-index: 1002; left: 0px;opacity:0.5; -moz-opacity:0.5;display:none;}</style>其中：opacity:0.5;适⽤于IE，-moz-opacit:0.5;适⽤于⽕狐；你只需要都加上，便可以⽕狐和IE下都可以使⽤。

2.指定层的⾼度、和宽度。

js代码<script type="text/javascript">//兼容⽕狐、IE8//显⽰遮罩层function showMask(){$("#mask").css("height",$(document).height());$("#mask").css("width",$(document).width());$("#mask").show();}//隐藏遮罩层function hideMask(){$("#mask").hide();}</script>3.在<body>中加⼊如下代码，然后就可以看效果了：html代码<div id="mask" class="mask"></div><a href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="showMask()" >点我显⽰遮罩层</a><br />4.使⽤⽅法：在ajax提交表单后，加上showMask⽅法，数据返回后，加上hideMask()需要的亲们可以根据⾃⼰需求，在遮罩层上⾯加⼀些提⽰信息<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> jQuery遮罩层</title><style type="text/css">.mask {position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;z-index: 1; left: 0px;opacity:0.5; -moz-opacity:0.5;display:none;}.msg {width: 300px;height: 200px;color: #3c763d;background-color: #dff0d8;border-radius: 4px;padding: 15px;position: absolute;top: 0;text-align: center;margin: 0 auto;z-index: 999;left: 50%;margin-left: -150px;display:none;}</style></head><body><div id="mask" class="mask" onclick="hideMask()"></div><div align="center" class="msg">提⽰信息</div><a href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="showMask()" >点我显⽰遮罩层</a><br /><script src="/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript">//兼容⽕狐、IE8//显⽰遮罩层function showMask(){$("#mask").css("height",$(document).height());$("#mask").css("width",$(document).width());$("#mask").show();$(".msg").show();}//隐藏遮罩层function hideMask(){$("#mask").hide();$(".msg").hide();}</script></body></html>更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家jQuery程序设计有所帮助。

jQuery遮罩层实现⽅法实例详解（附遮罩层插件）本⽂实例分析了jQuery遮罩层实现⽅法。

分享给⼤家供⼤家参考，具体如下：1 背景半透明遮罩层样式需要⼀个⿊⾊（当然也可以其他）背景，且须设置为绝对定位，以下是项⽬中⽤到的css样式：/* 半透明的遮罩层 */#overlay {background: #000;filter: alpha(opacity=50); /* IE的透明度 */opacity: 0.5; /* 透明度 */display: none;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 100; /* 此处的图层要⼤于页⾯ */display:none;}2 jQuery实现遮罩/* 显⽰遮罩层 */function showOverlay() {$("#overlay").height(pageHeight());$("#overlay").width(pageWidth());// fadeTo第⼀个参数为速度，第⼆个为透明度// 多重⽅式控制透明度，保证兼容性，但也带来修改⿇烦的问题$("#overlay").fadeTo(200, 0.5);}/* 隐藏覆盖层 */function hideOverlay() {$("#overlay").fadeOut(200);}/* 当前页⾯⾼度 */function pageHeight() {return document.body.scrollHeight;}/* 当前页⾯宽度 */function pageWidth() {return document.body.scrollWidth;}3 提⽰框遮罩的⽬的⽆⾮让⼈⽆法操作内容，突出提⽰框，⽽提⽰框可参考上⾯的制作，z-index⽐遮罩层更⾼便可。