手机端 弹出遮罩层 并且不可滑动 - zeromike - ITeye技术网站
博客分类：
最近用phonegap在安卓手机中使用Html5+css3做页面，
需求：在页脚导航按钮上，点击【同意】弹出一个页面，页面中是动态生成的单选按钮。
&div id="show"&
&div data-role="controlgroup" id="btnGroups" data-type="vertical" style="min-height:80 max-height:237overflow-y:"&
&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 class="ui-grid-a"&
&div class="ui-block-a"&
&a name="yes" data-role="button" style="display:font-size:16"&同意&/a&
&div class="ui-block-b"&
&a data-role="button" id="cancelBtnPage"
style="display:font-size:16"&取消&/a&
&div id="bg"&&/div&
&a href="#" data-role="button" id="yesNextBtn"
style="display:font-size:16"&同意&/a&
#bg{ display:
width: 100%;
height: 100%;
background-color:
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);}
#show{display:
left: 18%;
width: 63%;
height: 49%;
padding: 8
border: 8px solid #E8E9F7;
background-color:
z-index:1002;
overflow:}
$('#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:font-size:16"&同意&/a&
&div class="ui-block-b"&
&a data-role="button" id="noBtn" style="display:font-size:16"&驳 回&/a&
id="show"&
&div id="btnGroups" data-role="controlgroup" data-type="vertical" class="groupbtn"&
&div class="ui-grid-a list-btn"&
&div class="ui-block-a"&
&a name="yes"
data-role="none"&同意&/a&
&div class="ui-block-b"&
&a data-role="none" class="list-btn-active" id="cancelBtnPage"&取消&/a&
在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);
$('#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');
------------------------------------------------------你懂的----------------------------------------------------------------------
问题情况描述：
上面我已经描述过了，在某些机型弹出层，会有弹出层背景出现黑色块状的问题，我调试看了，这些黑色区域确实属于遮罩层，这些黑色块状区域无法直接定位，很无奈，我猜测还是页眉页脚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');
浏览 34671
zhangzhaoaaa
浏览: 575865 次
来自: 北京
document.ready 是页面加载完成的时候执行的。wi ...
楼主你好，现在测试发现有个问题，modifyParameter ...
c_yang13 写道博主能不能说清楚 代码2：调用请求路径中 ...
博主能不能说清楚 代码2：调用请求路径中的status().i ...
的确如此！HTML onclick 事件属性温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
真诚 幽默 善良
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(8229)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'wap页面手机网站触屏事件 按下 松开 滑动',
blogAbstract:'&!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"&&html xmlns=\"http://www.w3.org/1999/xhtml\"&&head&
&title&&/title&
&meta http-equiv=\"Content-Type\" content=\"text/charset=utf-8\" /&
&meta content=\"width=device-width, initial-scale=1.0,',
blogTag:'手机网站触屏事件,wap网站触屏事件,手机网站按下',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:5,
publishTime:4,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:2,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'真诚 幽默 善良',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}2014年9月 Web 开发大版内专家分月排行榜第二
2014年10月 Web 开发大版内专家分月排行榜第三2014年6月 .NET技术大版内专家分月排行榜第三
2013年4月 总版技术专家分月排行榜第一2013年3月 总版技术专家分月排行榜第一
2013年4月 .NET技术大版内专家分月排行榜第一2013年3月 .NET技术大版内专家分月排行榜第一
2014年9月 Web 开发大版内专家分月排行榜第二
2014年10月 Web 开发大版内专家分月排行榜第三2014年6月 .NET技术大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。求教：手机端怎么实现点击按钮保存图片的功能_html吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：83,289贴子：
求教：手机端怎么实现点击按钮保存图片的功能收藏
我想实现点击按钮后将一个图片保存到手机中的功能，请问应该怎么做？
html培训,千锋Html5培训,名企内部推荐就业,面对面教学模式,成就高薪互联网工程师!html培训,企业级项目实战,总监级名师面授,0基础4个月速成为web开发工程师,高薪就业!
真心求教啊&a href=&& download=&&&下载&/a&在pc端可以实现，但在手机上没作用啊
没有人吗？真心求教啊
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或