最近用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); })
相关推荐
"手机端侧边导航滑动遮罩层"是针对这种需求的一种实现,通常结合JavaScript库如jQuery来实现动态效果。在本案例中,我们重点关注的是使用jQuery创建一个具有滑动效果的侧边导航菜单,并且当菜单展开时,会有一个遮罩...
在移动应用开发中,"手机端图片弹出层查看(支持左右滑动图片切换)"是一个常见的功能需求,尤其在电商、社交或者媒体类应用中,用户可能需要查看大图,而这种查看方式通常以弹出层的形式呈现,方便用户在不离开当前...
在这个“jQuery弹出遮罩层步骤流程表单代码”项目中,我们将会探讨如何利用jQuery来实现一个功能丰富的交互式用户体验,特别是涉及弹出遮罩层、步骤流程和表单提交。 首先,`index.html`是项目的主页面,它包含了...
本篇文章将详细探讨在jQuery中实现弹出遮罩层的技术要点,通过几个实例来帮助初学者理解并掌握这一技能。 首先,我们需要了解遮罩层(Modal)的概念。遮罩层是一种常见的用户界面元素,它在网页上创建一个半透明或...
在完成以上步骤后,你就可以实现一个具备CSS3动画效果的手机端遮罩层弹出菜单了。通过不断优化和调整,你可以创建出更符合用户需求和设计风格的交互体验。记住,实践是检验代码有效性的最好方式,所以不妨根据上述...
"jQuery手机端遮罩弹出菜单代码.zip"这个压缩包包含了一套专门为手机端设计的jQuery实现的遮罩弹出菜单。这个解决方案利用了jQuery库的灵活性和HTML5的先进特性,以创建一个高效且响应式的模态窗口弹出层。 首先,...
"jQuery弹出登录遮罩层效果"是一个常见的交互设计技术,它允许用户在不影响主页面内容的情况下,通过一个半透明的遮罩层弹出登录窗口。这种方法既保证了用户体验,又确保了登录过程的安全性。下面将详细介绍如何实现...
总结起来,HTML5手机端点击弹出层的实现涉及HTML5的基本元素、CSS3的样式控制以及JavaScript或jQuery的交互逻辑。通过熟练掌握这些技术,开发者可以创建出丰富多样的用户界面,提升移动应用的用户体验。在实际开发...
在弹出遮罩层菜单中,CSS3的转换(transform)、过渡(transition)和动画(animation)属性尤为重要。转换可以改变元素的位置、大小和形状;过渡让元素在状态之间平滑过渡;而动画则允许你创建自定义的运动路径和...
"弹框后禁止遮罩层后面页面滚动(兼容ios和android)"这个主题涉及到的是一个常见的问题,即当弹出一个对话框或者遮罩层时,如何防止用户在遮罩层下继续滚动页面。这个问题在iOS和Android平台上表现不同,需要特定的...
《jQuery弹出层插件:实现简单遮罩弹出框效果》 在Web开发中,弹出层(Modal)是一种常见的交互元素,用于在用户与页面进行交互时提供额外的信息或者功能。jQuery作为一款强大的JavaScript库,提供了丰富的插件来...
html5手机端的点击弹出侧边滑动菜单代码
利用CSS3的`transition`和`animation`属性,我们可以添加动态效果,如淡入淡出、滑动等,使弹出框和遮罩层的出现更加吸引人。 6. 响应式设计: 在现代网页设计中,弹出框和遮罩层应具有响应式布局,以适应不同...
在事件处理函数中,显示弹出框,添加遮罩层,并可加入动画效果。 4. **插件使用** 如果使用插件,只需在页面加载后调用插件方法,并传递参数以配置弹出框的行为。 以上就是关于"jQuery弹出层插件三种简单遮罩弹出...
接着,在页面加载完成后,通过JavaScript将遮罩层和弹出框设置为不可见,然后根据需求绑定事件监听器,以便在合适的时候显示弹出框。 总的来说,JavaScript遮罩层弹出框是网页交互设计中的一个重要组成部分,它结合...
当用户触发某个操作(如点击按钮)时,遮罩层会出现在页面上,覆盖所有可交互的元素,而弹出窗口则在遮罩层之上显示,这样用户只能与弹出窗口交互,直到关闭窗口或完成操作。 对于提示信息和确认提示框,遮罩层同样...
在本文中,我们将探讨如何利用jQuery操作DOM来实现页面上的遮罩层弹出效果,以及如何针对Web端和移动端防止遮罩层在滚动时发生滑动,从而确保用户体验的一致性和优化。 首先,让我们来看看页面遮罩层的基本概念。...
"jQuery手机左侧弹出层多级菜单滑动"是一个专为移动端优化的功能,它利用jQuery库的灵活性和强大功能,创建了一个可自定义、易于操作的侧滑菜单,支持多级导航。这种设计模式通常用于响应式网站或手机应用,旨在节省...
这种效果使得用户在鼠标悬停于图片上时,会出现一个半透明的遮罩层,并且这个遮罩层会沿着指定方向进行平滑的滑动,提供一种动态的视觉体验,增加用户体验的趣味性和互动性。在本案例中,这个效果是仿照腾讯课堂的...
HTML5手机端弹出侧边栏滑动菜单是一种常见的网页交互设计,特别是在移动设备上,它为用户提供了一种便捷的导航方式。这个代码资源是基于jQuery和HTML5编写的,旨在帮助开发者创建一个动态的、响应式的侧边栏菜单,...