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

ruanjianxiong 2014-08-17

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

------------------------------------------------------你懂的---------------------------------------------------------------------

我有点受宠若惊,上面这篇博文,在我写完两天后,就被别人扒走,并且还没有附上我博文的链接,唉,算了。下面做点补充,在使用jquery mobile写这个页面的时候,发现一个问题,

        还是上面的需求:页脚固定,在页脚上写一个按钮,点击按钮后,弹出遮罩层。

        环境:phonegap,jquery mobile

        测试情况:这个遮罩层页面在所有PC端浏览器、手机端浏览器、小米2S,联想PAD上测试,弹出遮罩层都是一样的,没有问题,但是在三星galaxy 2s,oppo的手机上测试,弹出的遮罩层显示出来了,弹出框也显示出来了,但是在遮罩层下面有大小不定的黑色块状区域显示出来。最后,在我精简代码后,发现是由于页脚固定导致的,不管我是用jquery mobile的data-position="fixed"还是我自己写样式position:fixed,在上面两款手机上的弹出框和遮罩层下面都会出现黑色区域,去掉后,显示正常,我暂时不确定是什么原因导致的,我现在没有安装phonegap的调试环境,没有具体发现症结所在,我用了一个我感觉比较二的方法,解决了这个问题。

      页脚代码:

<div data-role="footer" id="footerFixed" data-position="fixed"> 
     <div class="ui-grid-a"> 
      <div class="ui-block-a"> 
       <a data-role="button" id="yesNextBtn" style="display: block;font-size:16px;">同意</a> 
      </div> 
      <div class="ui-block-b"> 
       <a data-role="button" id="noBtn" style="display: block;font-size:16px;">驳 回</a> 
      </div> 
     </div> 
    </div>
    弹出框:

   

<div  id="show"> 
	        	<div id="btnGroups" data-role="controlgroup" data-type="vertical" class="groupbtn">
	            </div>
		    	<div class="ui-grid-a list-btn">
		            <div class="ui-block-a"> 
		              <a name="yes"  data-role="none">同意</a> 
		             </div> 
		             <div class="ui-block-b"> 
		              <a data-role="none" class="list-btn-active" id="cancelBtnPage">取消</a> 
		             </div> 
		   		</div>
    </div>
   在data-role="content"区域内有个隐藏区域,这里我写了个测试,我的代码content区域内有个隐藏区域,我用那个隐藏域的id
<div id="test" style="display:none"></div>
 

点击弹出框代码:

   

$('#yesNextBtn').click(function(){
		$('#bg').css("height",1200);//bg高度,我这里是写死,可以获取整个page的高度
                //弹出框弹出前,将footer上的所有样式去掉
		$('#footerFixed').removeClass('ui-footer-fixed');
		$('#footerFixed').removeClass('ui-footer');
		$('#footerFixed').removeClass('slideup');
		$('#footerFixed').removeClass('ui-bar-inherit');
		$('#footerFixed').trigger('create'); 
                //关键是触发这个点击事件,才会导致footer上的样式失效
		$('#test').trigger('click');
		setTimeout(function(){
			document.getElementById("bg").style.display ="block";
			document.getElementById("show").style.display ="block";
			$('html,body').animate({scrollTop: '0px'}, 100);
		},200);
		$('#bg').bind("touchmove",function(e){
				e.preventDefault();
		});
		$('#show').bind("touchmove",function(e){
			e.stopPropagation();
		});
	})
   关闭弹出框:

   

$('#cancelBtnPage').click(function(){
                 //关闭弹出框时,再将样式加回来
		 $('#footerFixed').addClass('ui-footer-fixed');
		 $('#footerFixed').addClass('ui-footer');
		 $('#footerFixed').addClass('slideup');
		 $('#footerFixed').addClass('ui-bar-inherit');
		 $('#footerFixed').trigger('create'); 
		 document.getElementById("bg").style.display ='none';
		 document.getElementById("show").style.display ='none';
		 setTimeout(function(){
                         //触发样式生效
			 $('#test').trigger('click');
		 },200);
	})
 

 ------------------------------------------------------你懂的----------------------------------------------------------------------

 问题情况描述:

      上面我已经描述过了,在某些机型弹出层,会有弹出层背景出现黑色块状的问题,我调试看了,这些黑色区域确实属于遮罩层,这些黑色块状区域无法直接定位,很无奈,我猜测还是页眉页脚fix后遮罩层高度问题导致的,所以在点击页脚按钮的时候,先全屏显示,然后再获取page的高度。还有一个问题,就是点击输入框后,输入法框弹出后,将page的高度进行了压缩,如果此时点击页脚上的按钮,弹出的遮罩层高度计算不准确,在这里,我做的是,当focus到输入框的时候,页脚上的按钮进行隐藏,blur后,输入法框自动隐藏后,再将页脚上的按钮显示出来。

       代码如下:

       

var footerFixed = $('div[data-role=footer]').get(0);
    $('textarea,input').on('focus',function(){
    	$(footerFixed).css('display','none');
    });
    $('textarea,input').on('blur',function(){
    	$(footerFixed).css('display','block');
    });
    $('#yesNextBtn').on('tap',function(){
		$('#tabs').addClass('ui-fixed-hidden');//页眉加上全屏的class
		$('#tabs').trigger('create'); 
		$(footerFixed).addClass('ui-fixed-hidden');//页脚加上全屏的class
		$(footerFixed).trigger('create'); 
		$('#bg').css("height",$('#page').height()+200);//page的高度+200
		document.getElementById("bg").style.display ="block";
		document.getElementById("show").style.display ="block";
		$('html,body').animate({scrollTop: '0px'}, 100);
		$('#show').bind("touchmove",function(e){
			e.stopPropagation();
		});
    })
 

   

$('#cancelBtnPage').click(function(){
		 document.getElementById("bg").style.display ='none';
		 document.getElementById("show").style.display ='none';
		 setTimeout(function(){
			 $('#test').trigger('click');
		 },200);
})
 

相关推荐