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

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

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

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

  1.  <style>
  2.      #popupmenu{position:absolute;left:0;top:0;width:100%;height:100%;background:#fff;display:none;}
  3.  </style>
  4.  <div id="popupmenu">
  5.      <iframe allowtransparency="true" src="mask.html" scrolling="auto" width="100%" height="100%" frameborder="0"></iframe>
  6.  </div>
  7.  <div id="top" style="z-index:1">
  8.      <iframe src="top.html" scrolling="no" height="63" width="100%" frameborder="0"></iframe>
  9.  </div>
  10.  <div id="bottom" style="z-index:1">
  11.      <iframe id="left_menu" src="left.html" scrolling="no" width="176" frameborder="0"></iframe>
  12.      <iframe id="right_body" src="right.html" scrolling="auto" frameborder="0"></iframe>
  13.  </div>
  14.  <script type="text/javascript">
  15.      function showPop(){
  16.      document.getElementById("popupmenu").style.display = 'block';
  17.  }
  18.  function closePop(){
  19.      document.getElementById("popupmenu").style.display = 'none';
  20.  }
  21.  </script>

下面是分页面

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title></title>
  6.      </head>
  7.      <body style="background: green;">
  8.  
  9.          <a href="#" onclick="parent.window.showPop();return false;">点击弹出</a>
  10.      </body>
  11.  </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. js数组的操作 【转】

    用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多, 自以为js高手的自己居然无从下手,一下狠心,我学! ...

  2. iOS之隐藏状态栏

    iOS7中,不仅应用的风格有一定的变化,状态栏变化比较大,我们可以看到UIViewController的状态栏与导航栏基本是一体的.因此UIVIEWCONTROLLER的hide/show状态的方法也 ...

  3. Java计算文件的SHA码和MD5码

    可参考:http://blog.csdn.net/hudashi/article/details/8394158 /** * 计算文件的MD5码 * @param file * @return */ ...

  4. [改善Java代码] 谨慎包装类型的大小比较

    建议27:谨慎包装类型的大小比较 基本数据类型比较大小木有问题,不过其对应的包装类型大小比较就需要注意了.看如下代码: public class Client { public static void ...

  5. [改善Java代码]若有必要,使用变长数组

    Java中的数组是定长的,一旦经过初始化声明就不可改变长度,这在实际使用的时候非常不方便.比如要对一个班级的学生信息进行统计,因为我们不知道班级会有多少个学生(随时可能有退学,入学,转学),所以需要一 ...

  6. 媒体查询的应用以及在css3中的变革

    CSS一直都支持设置与媒体相关联的样式表.它们可以适应不同媒体类型的显示.例如,文档在屏幕显示时使用sans-serif字体,在打印时则使用serif字体.screen和print是两种预定义的媒体类 ...

  7. C# winform滚动字幕

    private void timer1_Tick(object sender, EventArgs e)//用Timer来控制滚动速度 { label1.Left -= 2;//设置label1左边缘 ...

  8. Remote Desktop Connection Manager介绍

    Remote Desktop Connection Manager (RDCMan) 是微软Windows Live体验团队的主要开发者 Julian Burger开发的一个远程桌面管理工具.简称为R ...

  9. 【转】MySQL的安装与配置

    一.MySQL的安装 1.在线安装: 命令:sudo apt-get install mysql-server 在安装的过程中将提示为“root”用户设置密码,输入自己的密码即可,安装按成后已自动配置 ...

  10. iOS - 基于蓝牙数据交换的环境监测(温度、湿度、光照、粉尘、噪声)

    一.蓝牙外设的数据接收 二.App端显示获取数据