如图，请问如何实现弹出提示框，并且伴随遮罩层并且可以关闭弹出框？

3回答

扬帆大鱼

　你好，遮罩层样式可以用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>

0 0

一只萌萌小番薯

通过jquery的show()和hide()函数联合使用，实现弹出窗口。一、show（）和hide（）函数解析：1、show() 方法显示隐藏的被选元素。注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。2、hide() 方法隐藏被选元素。这与 CSS 属性 display:none 类似，但是隐藏的元素不会被完全显示（不再影响页面的布局）。二、设计一个HTML页面，包括一个简单的弹出窗，和一个显示按钮。其中，调用了jquery的以上两个函数。具体代码如下：三、设计遮罩层的样式，如下：四、弹出窗口的css样式，代码如下：五、初始页面如下：六、点击按钮，查看弹出窗口结果：七、关闭弹出窗后，打开开发者中心，如下：

0 0

幕布斯6054654

<div id="show"><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);}#show{display: 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;}

0 0