使用div+iframe实现弹窗及弹出内容无法显示的解决
使用div+iframe实现弹窗
除了使用实际的弹出窗口,还可以使用控制一个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.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";
}
该种方案旨在说明如何在父窗口中判断子窗口的状态,具体的使用过程中还是使用查询字符串的方式更为理想。
使用div+iframe实现弹窗及弹出内容无法显示的解决的更多相关文章
- js弹窗 js弹出DIV,并使整个页面背景变暗
1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: # ...
- bootstrap弹窗、弹出层、modal
bootstrap弹窗.弹出层.modal 引入bootstrap的js文件 如下div代码 <div class="modal fade" id="myMo ...
- DIV+CSS制作二级横向弹出菜单,略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
- 搜狗输入法弹出搜狐新闻的解决办法(sohunews.exe)
狗输入法弹出搜狐新闻的解决办法(sohunews.exe) 1.找到搜狗输入法的安装目录(一般是C:\program files\sougou input\版本号\)2.右键点击sohunews.ex ...
- Example005控制弹出窗口居中显示
<!-- 实例005控制弹出窗口居中显示 --> <head> <meta charset="UTF-8"> </head> < ...
- 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法
在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...
- How to: Display a List of Non-Persistent Objects in a Popup Dialog 如何:在弹出对话框中显示非持久化对象列表
This example demonstrates how to populate and display a list of objects that are not bound to the da ...
- JS 弹出网页 (不显示地址栏,工具栏) 网页去掉地址栏
JS 弹出网页 (不显示地址栏,工具栏) 网页去掉地址栏 window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 基本语法: ...
- 在iframe结构中,如何使弹出层位于所有框架的上方(-)
在做后台管理页面的时候,经常用到iframe.虽说这东西有些过时,也不利于SEO,但是后台就是后台,不需要考虑那么多东西,综合来说,用iframe还是很适合后台管理界面的. 但是在遇到弹出层时,出现了 ...
随机推荐
- (翻译玩)SQLALchemy backref章节文档
Linking Relationships with Backref 自从在Object Relational Tutorial中第一次提到backref参数后,许多案例中也用到了backref,那么 ...
- cygwin编译SDL1.2
1.下载了一个SDL-1.2.14.tar.gz 2.下载一个cygwin64对SDL-1.2.14.tar.gz解压 tar -zxvf SDL-1.2.14.tar.gz 在网上找的大概是需要需要 ...
- TCP释放连接时为什么time_wait状态必须等待2MSL时间
为什么上图中的A在TIME-WAIT状态必须等待2MSL时间呢? 第一,为了保证A发送的最后一个ACK报文能够到达B.这个ACK报文段有可能丢失,因而使处在LAST-ACK状态的B收不到对已发送的FI ...
- 使用Volley StringRequest Get的方式进行发票查询操作
//进行发票查询 btnFpSelect.setOnClickListener(btnFpSelectClickListener); private OnClickListener btnFpSele ...
- CCI_chapter 19 Moderate
19 1 Write a function to swap a number in place without temporary variables void swap(int &a, i ...
- zabbix如何选择适合的监控类型(107)
zabbix agent zabbix自带的客户端程序(被动模式),zabbix server主动向它收集监控数据.agent提供丰富的key,包括不限于cpu.内存.网络.磁盘.web等等.如果你不 ...
- JVM基础和调优(一)
最近的项目中,出现了内存和性能的问题,需要优化,所以趁着这个机会,把自己关于java虚拟机的东整理一下,不对的地方,欢迎指出. 数据类型,因为在java的优化的过程中,检测到的数据类型一般比较的基础, ...
- (poj 1475) Pushing Boxes
Imagine you are standing inside a two-dimensional maze composed of square cells which may or may not ...
- fcntl函数加文件锁
对文件加锁是原子性的,可以用于进程间文件操作的同步.在linux下,有三个函数可以对文件进程加锁,分别是fcntl.flock.lockf.这里只说fcntl,它的用法也是最复杂的. fcntl是fi ...
- Android Support库百分比布局
之前写过一篇屏幕适配的文章Android 屏幕适配最佳实践,里面提到了类似百分比布局的东西,可是该方法缺点非常明显,就会添加非常多没用的数据,导致apk包变大. 而谷歌的support库中,添加了一个 ...