使用div+iframe实现弹窗

mtdxc 贡献于2011-12-29

作者 user  创建于2010-12-03 02:02:00   修改者user  修改于2010-12-03 02:05:00字数1443

文档摘要:除了使用实际的弹出窗口,还可以使用控制一个div的display属性来模拟一个弹出窗口的操作,这里使用在Div里放一个iFrame的方式,主要考虑到可以在需要的时候加载弹出窗口的内容,减少主窗口的数据量。通是还要考虑的一个问题就是用户在完成一次选择后,当重复打开选择框时,如何保存用户上次选择的状态:例如用户在弹出窗口中从A-E5个选项中选择了AB两个,当再次打开时,应该保证AB两个是选中的。
关键词:

使用div+iframe实现弹窗 除了使用实际的弹出窗口,还可以使用控制一个div的display属性来模拟一个弹出窗口的操作,这里使用在Div里放一个iFrame的方式,主要考虑到可以在需要的时候加载弹出窗口的内容,减少主窗口的数据量。通是还要考虑的一个问题就是用户在完成一次选择后,当重复打开选择框时,如何保存用户上次选择的状态:例如用户在弹出窗口中从A-E5个选项中选择了AB两个,当再次打开时,应该保证AB两个是选中的。首先来看弹出窗口的实现,html代码和脚本如下: html               
这里要注意iFrame的src属性留空了(其实默认值为about:blank),而且display属性为none,在弹出窗口没有打开时iFrame没有页面,div也不可见。 javascript function fnPopup(){     document.getElementById('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.getElementById('uinput').value=document.getElementById('uinput').value; parent.document.getElementById('popup').style.display='none';    } 完成交互后把 div隐藏,模拟弹出窗口关闭。现在要解决弹出窗口状态保存的问题。考虑有两种方案,第一种方案为用查询字符串把值传到弹出窗口中,由弹出窗口做相应的处理;后一种方案为用户完成选择后,只是隐藏弹出窗的div,下次再打开时只将div显示,而不重新加载页面,这样也可以实现状态的保存。但采用后一种方式,在主页面发生反送动作后,状态同样也会丢失(这是后一种方案的问题)。后一种方案的实现为在fnPopup函数中做如下修改: function fnPopup(){     document.getElementById('popup').style.display='block'; // 只有在第一次显示时加载页面 if(window.frames[0].location.href=='about:blank')         window.frames[0].location.href="Dialog1.aspx"; } 该种方案旨在说明如何在父窗口中判断子窗口的状态,具体的使用过程中还是使用查询字符串的方式更为理想。

下载文档到电脑,查找使用更方便

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 3 金币 [ 分享文档获得金币 ] 0 人已下载

下载文档