最近用phonegap在安卓手机中使用Html5+css3做页面,
需求:在页脚导航按钮上,点击【同意】弹出一个页面,页面中是动态生成的单选按钮。
代码:
Html代码 收藏代码
for="1">1"radio" name="a" id="1" value="1" />
for="2">2"radio" name="a" id="2" value="2" />
div>
name="yes" data-role="button" style="display: block;font-size:16px;">同意
div>
"button" id="cancelBtnPage" style="display: block;font-size:16px;">取消
div>
div>
div>
"#" data-role="button" id="yesNextBtn" style="display: block;font-size:16px;">同意
Html代码 收藏代码
#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;}
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();
});
})
下面做点补充,在使用jquery mobile写这个页面的时候,发现一个问题,
还是上面的需求:页脚固定,在页脚上写一个按钮,点击按钮后,弹出遮罩层。
环境:phonegap,jquery mobile
测试情况:这个遮罩层页面在所有PC端浏览器、手机端浏览器、小米2S,联想PAD上测试,弹出遮罩层都是一样的,没有问题,但是在三星galaxy 2s,oppo的手机上测试,弹出的遮罩层显示出来了,弹出框也显示出来了,但是在遮罩层下面有大小不定的黑色块状区域显示出来。最后,在我精简代码后,发现是由于页脚固定导致的,不管我是用jquery mobile的data-position=”fixed”还是我自己写样式position:fixed,在上面两款手机上的弹出框和遮罩层下面都会出现黑色区域,去掉后,显示正常,我暂时不确定是什么原因导致的,我现在没有安装phonegap的调试环境,没有具体发现症结所在,我用了一个我感觉比较二的方法,解决了这个问题。
页脚代码:
Html代码 收藏代码