最近用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的高度+200document.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);
})