如何在一堆框架（Frame）上弹出div层Zebra Dialog 弹出层 包括ajax加载弹出页面和iframe打开弹出层-freejs.net代码演示
&&&&Zebra Dialog 弹出层 包括ajax加载弹出页面和iframe打开弹出层()
Zebra Dialog 弹出层 包括ajax加载弹出页面和iframe打开弹出层
&自定义对话框按钮，css颜色，ajax内容弹出
1.&默认设置&&href=&javascript:void(0)&&id=&example1&点击这里&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&
&&&&&&&&&&&&2.&5个不同的演示:&&href=&javascript:void(0)&&id=&example2_1&错误,&&href=&javascript:void(0)&&id=&example2_2&警告,&&href=&javascript:void(0)&&id=&example2_3&提问,&&href=&javascript:void(0)&&id=&example2_4&提示&，&href=&javascript:void(0)&&id=&example2_5&确认.&&
&&&&&&&&&&&&&&&
&&&&&&&&&&&&3.&自定义按钮&&href=&javascript:void(0)&&id=&example3&点击这里&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&4.&自定义提示框位置，本例在右侧顶部&href=&javascript:void(0)&&id=&example4&点击这里&&&
&&&&&&&&&&&&&&&
&&&&&&&&&&&&5.&自定义提示框位置，并设置为2秒后自动关闭&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&href=&javascript:void(0)&&id=&example5&点击这里&&
&&&&&&&&&&&&&&&
&&&&&&&&&&&&6.&点击载入ajax内容&&
&&&&&&&&&&&&&href=&javascript:void(0)&&id=&example6&点击这里&&
&&&&&&&&&&&&&&&
&&&&&&&&&&&&6.1&iframeajax打开对话框&&
&&&&&&&&&&&&href=&javascript:void(0)&&id=&example61&点击这里&&
&&&&&&&&&&&&&&&
&&&&&&&&&&&&7.&自定义css颜色&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&Click&&href=&javascript:void(0)&&id=&example7&点击这里&to&open.&&
&&&&&&&&&&&&&&&
&&&&&&&&&&
&原文地址:手机端 弹出遮罩层 并且不可滑动 - 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');
zhangzhaoaaa
浏览: 225962 次
来自: 北京
代码里面为什么都没有 &/head&?
话说不能说 写道请问把这段代码放到哪个位置呢？我放进去还是报错 ...
请问把这段代码放到哪个位置呢？我放进去还是报错
可以参考最新的文档：如何在eclipse jee中检出项目并转 ...
在firefox 下可以。IE9不行。在IE9下不使用onch ...iframe子页面操作父页面并实现屏蔽页面弹出层效果
本文为大家详细介绍下iframe子页面操作父页面实现屏蔽整个页面并弹出要显示的层，下面有个不错的示例大家可以参考下
问题：在index.html 中，iframe 引入son.html，在son.html 中如何点击某个操作，实现屏蔽整个页面，并弹出要显示的层？ 准备： index.html son.html 思路： 一：index.html中iframe引入son.html ， 代码如下: &!-- 右侧iframe开始 --& &div id="resDiv" class="resDiv"& &iframe name="res" class="iframestyle" allowtransparency="true" src="son.html" frameborder="0" scrolling="no"&&/iframe& &/div& &!-- 右侧iframe结束 --& 二： index.html的body部分中添加屏蔽层和内容展示层 代码如下: &!--弹出的登录页面层--& &div id="mapLayer" style="display: " & &input type="button" value="关闭" onclick="closeMap()" /& &/div& &!--屏蔽层，用来透明的屏蔽整个页面--& &div id="mapBgLayer" style="position: display:"&&/div& 三：index.html 中设置div的样式和实现打开关闭层的方法 代码如下: &style type="text/css"& #BgLayer { background: #939393 none repeat scroll 0 0; height:100%; width:100%; left:0; top:0; filter: alpha(opacity=80); /* IE */ -moz-opacity: 0.8; /* Moz + FF */ z-index: 10000; } #Layer { width: 400 height: 400 margin: -180px 0 0 -170 left: 50%; top: 50%; position: background: #FFF; z-index: 10001; border: 1px solid #1B5BAC; } &/style& &script type="text/javascript"& /*显示页面*/ function showDiv) { var bg = document.getElementById("BgLayer"); var con = document.getElementById("Layer"); //var w = document.documentElement.clientW //网页可见区域宽 //var h = document.documentElement.clientH//网页可见区域高 var w = document.body.scrollW //网页正文全文宽 var h = document.body.scrollH //网页正文全文高 // alert(w+"-"+h); bg.style.display = ""; bg.style.width = w + "px"; bg.style.height = h + "px"; con.style.display = ""; } /*关闭*/ function closeDiv() { var bg = document.getElementById("BgLayer"); var con = document.getElementById("Layer"); bg.style.display = "none"; con.style.display = "none"; } &/script& 四：son.html 中某个操作调用父页面方法 代码如下: &a href="javascript:void(0)" onclick="parent.window.showDiv()"&查看&/a&iframe 如何在子页面弹出层，覆盖父页面？
[问题点数：40分]
iframe 如何在子页面弹出层，覆盖父页面？
[问题点数：40分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关推荐：
2013年9月 Web 开发大版内专家分月排行榜第一
2013年10月 Web 开发大版内专家分月排行榜第二2013年8月 Web 开发大版内专家分月排行榜第二2013年1月 Web 开发大版内专家分月排行榜第二
2013年9月 Web 开发大版内专家分月排行榜第一
2013年10月 Web 开发大版内专家分月排行榜第二2013年8月 Web 开发大版内专家分月排行榜第二2013年1月 Web 开发大版内专家分月排行榜第二
2015年8月 .NET技术大版内专家分月排行榜第一2015年7月 .NET技术大版内专家分月排行榜第一2015年6月 .NET技术大版内专家分月排行榜第一2015年5月 .NET技术大版内专家分月排行榜第一2015年4月 .NET技术大版内专家分月排行榜第一
2015年3月 .NET技术大版内专家分月排行榜第二
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。