手机端 弹出遮罩层 而且不可滑动

手机端 弹出遮罩层 并且不可滑动

        最近用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();
		});
	})