就是html5（jQuery也行）点击确定，实现遮罩层效果，并且有弹出框，还有点击X实现关闭。
3 回答
扬帆大鱼
TA贡献1799条经验 获得超9个赞
你好，遮罩层样式可以用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> |
一只萌萌小番薯
TA贡献1795条经验 获得超7个赞
通过jquery的show()和hide()函数联合使用，实现弹出窗口。
一、show（）和hide（）函数解析：
1、show() 方法显示隐藏的被选元素。
注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。
2、hide() 方法隐藏被选元素。
这与 CSS 属性 display:none 类似，但是隐藏的元素不会被完全显示（不再影响页面的布局）。
二、设计一个HTML页面，包括一个简单的弹出窗，和一个显示按钮。其中，调用了jquery的以上两个函数。具体代码如下：
三、设计遮罩层的样式，如下：
四、弹出窗口的css样式，代码如下：
五、初始页面如下：
六、点击按钮，查看弹出窗口结果：
七、关闭弹出窗后，打开开发者中心，如下：
幕布斯6054654
TA贡献1876条经验 获得超7个赞
<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/150
提交
取消