转自：使用div+iframe实现弹窗_John_ABC_新浪博客 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"; } 该种方案旨在说明如何在父窗口中判断子窗口的状态，具体的使用过程中还是使用查询字符串的方式更为理想。
注：
按上面文章可以实现弹框，但位置显示上有些问题。我就加了个CSS效果。可以在当前页面中间位置显示。
把下面样式代码放在页面<header></header>中
<style type="text/css">
.popup{ width: 485px; height: 260px; position: absolute; top: 10%; left: 30%; background: #fcfdfd; box-shadow: 1px 8px 10px 1px #9b9b9b; border-radius: 1px; display: none; z-index: 111111;
display:none; }
</style>
调用方法：
上文中<div id="popup" style="border:1px solid #606060; width:320px; height:240px; display:none;">
改为：<div id="popup" class="popup">
