在做后台管理页面的时候,经常用到iframe.虽说这东西有些过时,也不利于SEO,但是后台就是后台,不需要考虑那么多东西,综合来说,用iframe还是很适合后台管理界面的.

但是在遇到弹出层时,出现了问题.由于页面是由三个html文件拼合而成的,所以每个分页面的弹出层,只能存在于自己的页面中,无法做到遮盖所有的分页面.

我在这里学到的第一种方法就是利用DIV包装Iframe的方法.可以解决这个问题.

下面是总的框架页面布局:

 <style>

     #popupmenu{position:absolute;left:0;top:0;width:100%;height:100%;background:#fff;display:none;}

 </style>

 <div id="popupmenu">

     <iframe allowtransparency="true" src="mask.html" scrolling="auto" width="100%" height="100%" frameborder="0"></iframe>

 </div>

 <div id="top" style="z-index:1">

     <iframe src="top.html" scrolling="no" height="63" width="100%" frameborder="0"></iframe>

 </div>

 <div id="bottom" style="z-index:1">

     <iframe id="left_menu" src="left.html" scrolling="no" width="176" frameborder="0"></iframe>

     <iframe id="right_body" src="right.html" scrolling="auto" frameborder="0"></iframe>

 </div>

 <script type="text/javascript">

     function showPop(){

     document.getElementById("popupmenu").style.display = 'block';

 }

 function closePop(){

     document.getElementById("popupmenu").style.display = 'none';

 }

 </script>

下面是分页面

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

     </head>

     <body style="background: green;">

         <a href="#" onclick="parent.window.showPop();return false;">点击弹出</a>

     </body>

 </html>

因为其他的页面中我并没有写任何东西,所以就不贴代码了.

关键就在于a的click事件.

parent.window意思就是父框架的window对象,去执行它的showPop方法.

但是,我感觉这并不是最好的解决办法.记录一下,希望大家有更好的建议.

在iframe结构中,如何使弹出层位于所有框架的上方(-)的更多相关文章

  1. 使用div+iframe实现弹窗及弹出内容无法显示的解决

    使用div+iframe实现弹窗 除了使用实际的弹出窗口,还可以使用控制一个div的display属性来模拟一个弹出窗口的操作,这里使用在Div里放一个iFrame的方式,主要考虑到可以在需要的时候加 ...

  2. layer iframe层ajax回调弹出layer.msg()

    ajax success方法 success: function(data){ layer.msg("输入你需要的提示",{time:1000,end:function(){ // ...

  3. Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)

     一.实际项目中有很多如下界面效果.    二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码:      <!DOCTYPE html> <html> & ...

  4. IOS开发之自定义系统弹出键盘上方的view(转载)

    这篇文章解决的一个开发中的实际问题就是:当弹出键盘时,自定义键盘上方的view.目前就我的经验来看,有两种解决方法.一个就是利用UITextField或者UITextView的inputAccesso ...

  5. WPF学习笔记（2）：准确定位弹出窗

    效果图:使弹出的列表框紧随在单元格的下边缘. 第一次,尝试在XAML中设置Popup的定位方式:Placement="Mouse".基本能够定位,但当在输入前移动鼠标,列表框就会随 ...

  6. B/S架构中常用弹出方法 (转）

    <一> 在B/S架构的项目中,为了提高项目的易用性,增强系统与用户的交互功能,一般使用弹出页面来为用户提供操作或数据选择帮助信息,比如,用户输入一个编码中某些字符,在弹出页面中显示所有包含 ...

  7. LODOP内嵌挡住浏览器的div弹出层

    首先,做一个简单的div弹出层用于测试,该弹出层的介绍可查看本博客另一篇博文:[JS新手教程]浏览器弹出div层 然后加入LODOP内嵌,LODOP可以内嵌,C-LODOP不能内嵌,可以在IE等浏览器 ...

  8. Bootstrap的js插件之弹出框(popover)

    data-toggle="popover"--使弹出框可以切换状态: title--设置弹出框的标题: data-content--设置弹出框的内容部分: data-placeme ...

  9. popover弹出框

    <style> #view{width: 300px;height: 200px;border: 1px solid red;} </style> 以上是为了viewport更 ...

随机推荐

  1. SSIS 学习（7）：包配置（下）【转】

    经过前面几个章节的学习,我们开发的ETL包算已经完成一大半了,但是还不够完美,正如一场足球比赛,前面大家打得很辛苦,传接得也很漂亮,但 是临门一脚的技术不过关,进不了球,一切都是白搭.今天我们就来为大 ...

  2. 编译APK时出现 This attribute must be localized 的两种解决方法 免修改xml

    下面两种方法可以让你不需要修改APP XML字符串的条件下忽略 This attribute must be localized 的 Android 源码编译时的错误警告. 1.修改当前APP的 An ...

  3. eclipse中自动生成javadoc文档

    使用eclipse生成文档(javadoc)主要有三种方法:  1,在项目列表中按右键,选择Export(导出),然后在Export(导出)对话框中选择java下的javadoc,提交到下一步.  在 ...

  4. Java 正则表达式漏洞

    由于工作原因,一直没有时间把在线上遇到的问题总结一下.还好,今天我来了. 废话少说了. 主要说一下“java 正则表达式中的一个漏洞”,详细问题描述 http://bugs.sun.com/bugda ...

  5. asp.net session容易丢失解决方案

    web Form 网页是基于HTTP的,它们没有状态, 这意味着它们不知道所有的请求是否来自 同一台客户端计算机,网页是受到了破坏,以及是否得到了刷新,这样就可能造成信息的 丢失. 于是, 状态管理就 ...

  6. LeetCode 319

    Bulb Switcher There are n bulbs that are initially off. You first turn on all the bulbs. Then, you t ...

  7. C#/.NET使用HttpWebRequest、SqlBulkCopy从API获取数据批量插入DB

    小弟新手程序员一枚,代码技术和文章水平均不才.所写文章均为对自己所写所学代码的简单记录,可能对于老手程序员营养价值不高,望莫见怪. 我工作上有个需求:从某处API接口上获取数据(大约1W条而已)并插入 ...

  8. SharePoint中 服务器发出意外响应。响应状态代码是"500"。

    原因是由于服务器内存不够.  

  9. Excel日期格式单元格写成yyyy.MM.dd格式将无法读取到DataTable

    最近在改公司的订单系统,遇到了一个奇怪的问题.C#程序需要从Excel文件中将数据全部读取到DataTable,其中Excel文件的第一列是日期格式yyyy/MM/dd,而这一列中大部分的单元格都是按 ...

  10. JavaScript设置cookie

    在做网站的时候会用到JS操作cookie,现在写下来,算是对自己工作的一次小小总结,后面用到的时候就不用再写一遍了,高手就不用看了. /* 添加cookie 参数:cookie名,cookie值,过期 ...