手机端 弹出遮罩层 而且不可滑动
手机端 弹出遮罩层 并且不可滑动
最近用phonegap在安卓手机中使用Html5+css3做页面,
需求:在页脚导航按钮上,点击【同意】弹出一个页面,页面中是动态生成的单选按钮。
代码:
<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>
#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;}
$('#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(); }); })