关键词：
就是html5（jQuery也行）点击确定，实现遮罩层效果，并且有弹出框，还有点击X实现关闭，如图，最好是代码在线等，谢谢各位了。
如果好的还可以再加分谢谢大家了 在线等
通过jquery的show()和hide()函数联合使用，实现弹出窗口。
一、show（）和hide（）函数解析：
1、show() 方法显示隐藏的被选元素。
注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。
2、hide() 方法隐藏被选元素。
这与 CSS 属性 display:none 类似，但是隐藏的元素不会被完全显示（不再影响页面的布局）。
二、设计一个HTML页面，包括一个简单的弹出窗，和一个显示按钮。其中，调用了jquery的以上两个函数。具体代码如下：
三、设计遮罩层的样式，如下：
四、弹出窗口的css样式，代码如下：
五、初始页面如下：
六、点击按钮，查看弹出窗口结果：
七、关闭弹出窗后，打开开发者中心，如下：
你好，遮罩层样式可以用CSS写，用js/jquery控制显示隐藏就可以了
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.min.js"></script>
<style>
*padding: 0; margin: 0
.box
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
display: none;
.box1
width: 500px;
height: 500px;
position: fixed;left: 50%; top: 25%;
margin-left: -250px;
border: 1px solid #000000;
</style>
<script>
</script>
</head>
<body>
<div class="box">
<div class="box1">
<a href="javascript:;" onclick="jQuery('.box').hide()" class="close">关闭</a>
</div>
</div>
<a href="javascript:;" onclick="jQuery('.box').show()" class="show">显示</a>
</body>
</html>
你好，非常感谢，代码可用，但是有个问题 这边为什么要加一个javascript:，可不可以不加，或者替换成别的代码？
追答 完全可以去掉href，这里只是个示例，完全可以用button代替，看自己的习惯，我这里用的是a标签
希望可以帮助到你，望采纳
<div data-role="controlgroup" id="btnGroups" data-type="vertical" style="min-height:80px; max-height:237px;overflow-y:auto;">
<label for="1">1</label><input type="radio" name="a" id="1" value="1" />
<label for="2">2</label><input type="radio" name="a" id="2" value="2" />
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<a name="yes" data-role="button" style="display: block;font-size:16px;">同意</a>
</div>
<div class="ui-block-b">
<a data-role="button" id="cancelBtnPage" style="display: block;font-size:16px;">取消</a>
</div>
</div>
</div>
<div id="bg"></div>
<a href="#" data-role="button" id="yesNextBtn" style="display: block;font-size:16px;">同意</a>
-------------------------------------------------------------------------------------
Js代码
$('#yesNextBtn').click(function()
//消除radio按钮上的checked
$('#btnGroups').find('input[type=radio]').each(function()
$(this).removeProp("checked").checkboxradio("refresh");
)
document.getElementById("bg").style.display ="block";
document.getElementById("show").style.display ="block";
$('html,body').animate(scrollTop: '0px', 100);//因为页面很长，有纵向滚动条，先让页面滚动到最顶端，然后禁止滑动事件，这样可以使遮罩层锁住整个屏幕
$('#bg').bind("touchmove",function(e)
e.preventDefault();
);
)
-------------------------------------------------------------------------------------
#bg display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);
#showdisplay: none; position: absolute; top: 25%; left: 18%; width: 63%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index:1002; overflow: auto;
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内使用scroll-view实现滚动内容（包括图片）(代码片段)
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内可以滚动内容（包括图片）效果图这里的遮罩层内容由两张图片构成底图+内部内容实现代码wxml使用云开发的存储，自己开发的时候换掉src即可内部的图片使用sty... 查看详情
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内使用scroll-view实现滚动内容（包括图片）(代码片段)
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内可以滚动内容（包括图片）效果图这里的遮罩层内容由两张图片构成底图+内部内容实现代码wxml使用云开发的存储，自己开发的时候换掉src即可内部的图片使用sty... 查看详情
jquerymobile中如何实现遮罩效果
...考上面的制作，z-index比遮罩层更高便可。主要问题是，如何控制提示框在浏览器居中。参考技术A你可以不后添加，原先就可以写好，然后宽高透明度设为0，需要用的时候点击出来全屏显示就行了 查看详情
实现弹出层，遮罩层
开发中经常会用到弹出遮罩层的时候，下面是一个简单的遮罩层弹窗<styletype="text/css"><!--body,td,th{font-size:12px;padding:0;margin:0;}.tanchuang{width:100px;height:100px;position:absolute;left:0px;top:0px;z-index:100;displa 查看详情
遮罩层的创建
...是对图层的某一部分进行遮罩，具体遮罩那一部分,又是如何实现呢？如果我们画一个矩形，并且把该图层作为遮罩层，那么，我们所遮罩的是该矩形以外的内容，而且遮罩层仅对遮罩的图层起作用!具体创建步骤如下：1.新建一... 查看详情
使用js实现显示系统当前时间并实现倒计时功能并触发模态框（遮罩）功能
...数，例如遮罩等，在本项目中，通过使用jquery，bootstrap，实现了显示系统当前时间，并且实现了倒计时的功能，倒计时实现后将会弹出模态框（遮罩层）。模态框界面友好，使用灵活，以弹出对话框的形式出现。具体见下图1：... 查看详情
elementui弹出组件的遮罩层以及多层遮罩解决办法
参考技术Aelementui弹出组件的遮罩层以及多层遮罩解决办法做项目中遇到两次弹出框遮罩层的问题。有嵌套的弹出框。表单是一层弹框，然后图片放大是一层弹框，两层弹框同时出现就会出现下面问题问题前Dialog对话框https://elemen... 查看详情
pc端点击弹出弹出框以及遮罩层的时候页面右侧出现空白区域，使得页面整体左移一下
项目场景：正常页面右侧显示弹出框以及遮罩层出现之后显示原因分析：遮罩层出现之后body加了一个padding解决方案：发现问题就能解决问题了：在公用样式里给body加一个样式padding:0!important;即可解决 查看详情
axurerp使用攻略--带遮罩层的弹出框
实现目标：1、 点击按钮弹出带遮罩层的对话框；2、 页面上下左右滚动时，弹出的对话框水平和垂直始终居中。实现步骤如下：1、拖入编辑区2个矩形，并点右键—转换—转换为动态面板；2、双击其中一个动态... 查看详情
vue添加全屏遮罩，并且消除滚动条(代码片段)
...，小屏幕时利用媒体查询，将菜单缩成一个icon，点击icon弹出侧边栏菜单先添加一个遮罩层，然后添加菜单，菜单的zindex高于遮罩层，菜单icon的zindex高于菜单，定位固定在右上角，这样点击icon菜单滑进滑出，icon的位置不需要额... 查看详情
element-ui弹出组件的遮罩层在弹出层dialog模态框的上面
出现的问题截图： 造成的原因：因为dialog的组件外层div设置了position：absolute；属性所以导致遮罩层会在最上面。解决方法：在属性内加上这段代码:append-to-body=“true”；或者:modal-append-to-body=“false”即可 ... 查看详情
bootstrap使用模态框当弹出两层的时候，遮罩层会把原有的透明度减少。
bootstrap使用模态框当弹出两层的时候，遮罩层会把原有的透明度减少，导致变得不透明了，还有如果要是弹出多个模态框的话，他的顺序会根据文件读取的顺序来显示层级关系，例如：两个模态框一个高度是400px,一个高度是200px... 查看详情
关闭弹出div层的代码
...V没有问题了,现在我想如果点了DIV层以外的区域它就关闭,如何弄呢?参考技术A你的div有没有和其他控件绑定在一起呢？比如当一个文本框得到焦点的时候div才会显示，如果那样的话在和div绑定的控件的失去焦点事件里写隐藏div的... 查看详情
bootstrap使用模态框当弹出两层的时候，遮罩层会把原有的透明度减少。
bootstrap使用模态框当弹出两层的时候，遮罩层会把原有的透明度减少，导致变得不透明了，还有如果要是弹出多个模态框的话，他的顺序会根据文件读取的顺序来显示层级关系，例如：两个模态框一个高度是400px,一个高度是200px... 查看详情
js简易弹出层
...活的在小项目中使用.目标要求模仿bootstrap的弹出层实现如何实现bootstrap弹出框的效果.经过研究后.思路如下将要弹出的DIV要置于body直属.不必有遮罩DIV.它在运行时由JS生成.关闭时再删掉弹出层DIV和遮罩层使用绝对定位并且长宽一... 查看详情
模态框-如何设置使得点击遮罩层不会关闭模态框
$("#模态框名字").modal({show:true,backdrop:‘static‘}); 或者$(‘#模态框名字‘).modal({backdrop:‘static‘,keyboard:false}); 查看详情
自制弹出框所踩的坑(代码片段)
...闭弹出框开始想的很简单，只要点击搜索框的父级就可以实现，实际结果是：点击搜索框的时候弹出框全部关闭。通过思考发现以下方法可以完美解决次问题htmllayer为整个弹出框search-box为搜索框 <divc 查看详情
微信打开网址提示浏览器打开的通用遮罩
...个遮罩提示用户在新的浏览器窗口打开。再也不用管微信如何的更新，直接判断微信的ua，然后弹出一个遮罩提示用户在浏览器中打开下载。并且不加关闭的按钮。类似于下面这样子：这样子用户就只能在浏览器中打开，并且可... 查看详情