from: http://blog.sina.com.cn/s/blog_8a18c33d0100v5hb.html
除了使用实际的弹出窗口,还可以使用控制一个div的display属性来模拟一个弹出窗口的操作,这里使用在Div里放一个iFrame的方式,主要考虑到可以在需要的时候加载弹出窗口的内容,减少主窗口的数据量。通是还要考虑的一个问题就是用户在完成一次选择后,当重复打开选择框时,如何保存用户上次选择的状态:例如用户在弹出窗口中从A-E5个选项中选择了AB两个,当再次打开时,应该保证AB两个是选中的。首先来看弹出窗口的实现,html代码和脚本如下:
html
<div id="popup" style="border:1px solid #606060; width:320px; height:240px; display:none;">
<iframe id="myFrame" src="" style="width:100%;height:100%;"></iframe>
</div>
这里要注意iFrame的src属性留空了(其实默认值为about:blank),而且display属性为none,在弹出窗口没有打开时iFrame没有页面,div也不可见。
javascript
function fnPopup(){
document.getElementByIdx_x('popup').style.display='block';
window.frames[0].location.href="Dialog1.aspx";
}
这里用了window的frames对象,这个对象获取在当前页面中定义的frame或iFrame,当前页面只有一个iframe所以直接用window.frames[0]获取出对iframe的引用,通过设置location.href属性,就在iframe中打开希望的弹出窗口,同时设置div可见,则弹出窗口呈现给用户。
在iFrame的虚拟弹出窗口中,可以使用window.parent与父窗口进行交互了,弹出窗口中负责交互的部分代码如下:
function fnCloseWin(){
parent.document.getElementByIdx_x('uinput').value=document.getElementByIdx_x('uinput').value;
parent.document.getElementByIdx_x('popup').style.display='none';
}
完成交互后把 div隐藏,模拟弹出窗口关闭。现在要解决弹出窗口状态保存的问题。考虑有两种方案,第一种方案为用查询字符串把值传到弹出窗口中,由弹出窗口做相应的处理;后一种方案为用户完成选择后,只是隐藏弹出窗的div,下次再打开时只将div显示,而不重新加载页面,这样也可以实现状态的保存。但采用后一种方式,在主页面发生反送动作后,状态同样也会丢失(这是后一种方案的问题)。后一种方案的实现为在fnPopup函数中做如下修改:
function fnPopup(){
document.getElementByIdx_x('popup').style.display='block';
// 只有在第一次显示时加载页面
if(window.frames[0].location.href=='about:blank')
window.frames[0].location.href="Dialog1.aspx";
}
该种方案旨在说明如何在父窗口中判断子窗口的状态,具体的使用过程中还是使用查询字符串的方式更为理想。
相关推荐
div+iframe做出的弹出窗口,效果等同于模态窗口。弹出窗口可最大化、最小化,可拖拽。带遮罩功能。 解决替换模态窗口,避免模态调模态出现的一系列问题:session丢失,提交返回,调父类方法层级多了或者多页面调的...
给大家介绍了div被iframe遮住的一些情况,以及被遮住后的解决办法,有需要的朋友们可以参考借鉴。
自己改写的js弹出div层模拟alert 可以自定义样式 在iframe框架中使用 避免了覆盖层只覆盖子页面的问题
弹出DIV可拖动窗口示例(编辑窗口/iframe/等待/确认) 弹出DIV可拖动窗口示例(编辑窗口/iframe/等待/确认)
div 通用弹窗 一个朋友提供的div 通用弹窗 一个朋友提供的
js 超酷多种弹出层 兼容各大浏览器 可以 弹出iframe js 超酷多种弹出层 兼容各大浏览器 非常实用。
上面的包含iframe,用以展示弹窗内容。下面的div实现半透明的遮罩效果。 代码: 复制代码代码如下: <div id=”div_window2″ xss=removed> ”99%” height=”99%” border=”0″ cellpadding=”0″ cellspacing=”...
iframe的div遮罩层(可遮罩select) 圆角遮罩层 很酷的遮罩 遮罩拖动演示 内弹登录样式 动态打开和关闭层 总共有50多种.....
问题:在index.html 中,...– 右侧iframe开始 –> <div id=”resDiv” class=”resDiv”> <iframe name=”res” class=”iframestyle” allowtransparency=”true” src=”son.html” frameborder=”0″ scrolling
这几天在写项目的中,页面使用了iframe,然而在子页面中使用bootstrap的模态框时发现:弹出的模态框位置是以子页面为标准居中的,并且遮罩层也只有子页面那一部分,整个页面简直无法直视,所以思考可以可以让模态框...
easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值,详情链接:
东西一般般,属于最简单的树型组件,高手止步 已基本有弹出树型下拉列表的框架,只是没有加上显示和隐藏div的方法 另外ie6下最好加上个iframe背景,解决select不支持z-index的BUG
当我们要实现一个模式弹窗时(模式弹窗,即是说出现弹窗时,页面其它地方不可点击),通常的做法是用一个div将整个页面窗口遮挡住。 实现 下面,我们一步步地实现一种较为简洁有效的遮罩层: Step 1: 首先我们要...
普通弹出窗口" onclick="ymPrompt.win('<div class=\'myContent\'>普通弹出窗口</div>',300,200,'普通弹窗测试')" /> 示例: 源码: <input type="button" value="iframe弹出窗口" onclick="ymPrompt.win('...
公司有街道政务系统的任务,系统一般都是三个iframe那样的界面,每次只能操作一个页面,考虑到方便性,我就为系统设计了个多窗口操作的,这里只是一个简单的测试界面,ie6里的显示还有问题,转移到具体应用上面还是需要更改...
在项目开发中我们经常会遇到弹窗,有的是通过div模拟弹窗效果,有的是通过iframe,也有通过window自带的open函数打开一个新的窗口。今天给大家分享的是最后一种通过window.open()函数打开页面进行数据交互。首先看下...
2、企业和个人管理中心内编辑内容选择改动平铺弹窗界面; 3、APP客户端内可以创建和编辑简历; 4、手机触屏版内新增创建和编辑简历; 5、新增互动问答,个人和企业可以及时交流; 6、企业会员新增积分功能,可以...
2、企业和个人管理中心内编辑内容选择改动平铺弹窗界面; 3、APP客户端内可以创建和编辑简历; 4、手机触屏版内新增创建和编辑简历; 5、新增互动问答,个人和企业可以及时交流; 6、企业会员新增积分功能,可以兑换...
// ad function dy(code) ...document.writeln ('<iframe width="120" height="24" frameborder="0" allowtransparency="true" marginwidth="0" marginheight="0" scrolling="no" border="0" src=...
vod_playopen.html 视频弹窗播放页 vod_search.html 视频搜索页面 vod_topicindex.html 视频专题首页 vod_topiclist.html 视频专题数据列表页 vod_type.html 视频分类页面 *********************...