使用div+iframe实现弹窗

本文介绍了一种使用div和iframe实现弹出窗口的方法,这种方法可以减少主窗口的数据量,并且能够在弹出窗口中保存用户的操作状态。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

转自:使用div+iframe实现弹窗_John_ABC_新浪博客
http://blog.sina.com.cn/s/blog_8a18c33d0100v5hb.html


除了使用实际的弹出窗口,还可以使用控制一个divdisplay属性来模拟一个弹出窗口的操作,这里使用在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>

这里要注意iFramesrc属性留空了(其实默认值为about:blank),而且display属性为none,在弹出窗口没有打开时iFrame没有页面,div也不可见。

javascript

function fnPopup(){
    document.getElementByIdx_x('popup').style.display='block';
        window.frames[0].location.href="Dialog1.aspx";
}

这里用了windowframes对象,这个对象获取在当前页面中定义的frameiFrame,当前页面只有一个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">

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值