div弹出窗口在frameset外层解决方案

首页通过framset经行网页布局,现在有个临时的消息窗口,ajax返回会弹出来。但是这个就有问题了。div作为网页元素,是依赖与 frame的。怎么让其在整个视图窗口的最上层呢? frmae 连接网页,会对超过的部分进行遮挡。这里提供了一种解决方案.先记录下来。

<html>
<head>
<title>index.jsp</title>
</head>
<frameset rows="*" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">
       <frame name="divframe" src="call.html" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" noresize scrolling="no">
</frameset>
<noframes>
<body>
sorry your browser doesn't accept frames
</body>
</noframes>
</html>

首页div需要覆盖的frame 放到引入的页面里,用iframe调用。

---call.html---

<html>
<body>
        <div id='popId' class='' style="position:absolute;float:left;top=5;left=25;display='none';z-index:2;"> 弹出div</div>
        <iframe src="mainindex.html" width=100% height=100% marginwidth=0>
</body>
</html>

 

--mainindex.html--

<frameset rows="30,*" style="z-index:1">
          <frame src="topframe.html" style="z-index:1">
   <frameset cols="30,*" style="z-index:1"> 

        <frame src="menuframe.html" style="z-index:1">
        <frame src="mainframe.html" style="z-index:1">

  </frameset>
      <frame src="footframe.html" style="z-index:1">
</frameset>

 

    js 动作

   <a οnclick="top.divframe.document.getElementById('popId').style.display='block'">显示DIv</a>

 

  --the  end!

转载于:https://my.oschina.net/ind/blog/377766

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在frameset框架上实现右下角窗,可以按照以下步骤进行操作: 1. 在frameset框架中添加一个子框架,用于显示窗内容。 2. 在父框架中添加一个按钮或链接,用于触发窗。 3. 通过CSS样式设置子框架的位置,使其显示在页面的右下角。 4. 编写JavaScript代码,在点击按钮或链接时显示子框架,点击窗以外的区域时隐藏子框架。 以下是具体的实现步骤: 1. 在frameset框架中添加一个子框架: ```html <frameset rows="*,30" frameborder="0"> <frame src="content.html" name="contentFrame"> <frame src="popup.html" name="popupFrame"> </frameset> ``` 上面的代码中,frameset框架中包含两个子框架,分别是名为"contentFrame"和"popupFrame"的框架,其中"contentFrame"用于显示页面内容,"popupFrame"用于显示窗内容。 2. 在父框架中添加一个按钮或链接,用于触发窗: ```html <a href="#" onclick="showPopup();">窗</a> ``` 上面的代码中,我们添加了一个链接,当用户点击链接时会触发名为"showPopup()"的JavaScript函数,用于显示窗。 3. 通过CSS样式设置子框架的位置,使其显示在页面的右下角: ```css frame[name="popupFrame"] { position: fixed; right: 20px; bottom: 20px; width: 200px; height: 100px; border: 1px solid #ccc; display: none; } ``` 上面的代码中,我们通过CSS样式设置了名为"popupFrame"的子框架的位置,将它固定在页面的右下角,设置了它的宽度、高度和边框样式,并将它的显示方式设置为"none",即初始时不显示。 4. 编写JavaScript代码,在点击按钮或链接时显示子框架,点击窗以外的区域时隐藏子框架: ```javascript function showPopup() { var popupFrame = window.frames['popupFrame']; popupFrame.style.display = 'block'; } document.onclick = function(event) { var popupFrame = window.frames['popupFrame']; if (event.target != popupFrame) { popupFrame.style.display = 'none'; } } ``` 上面的代码中,我们定义了名为"showPopup()"的函数,用于显示子框架。当用户点击窗以外的区域时,会触发"document.onclick"事件,用于隐藏子框架。注意,在这里我们不能直接通过"popupFrame.style.display = 'none'"来隐藏子框架,因为如果用户直接点击子框架上的内容,也会触发"document.onclick"事件,导致子框架无法正常显示。因此,我们需要通过"event.target"来判断用户是否点击了子框架上的内容,从而决定是否隐藏子框架。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值