当前位置: 首页 > 编程笔记 >

在iframe中使bootstrap的模态框在父页面弹出问题

宰父德馨
2023-03-14
本文向大家介绍在iframe中使bootstrap的模态框在父页面弹出问题,包括了在iframe中使bootstrap的模态框在父页面弹出问题的使用技巧和注意事项,需要的朋友参考一下

这几天在写项目的中,页面使用了iframe,然而在子页面中使用bootstrap的模态框时发现:弹出的模态框位置是以子页面为标准居中的,并且遮罩层也只有子页面那一部分,整个页面简直无法直视,所以思考可以可以让模态框以父页面为标准弹出,经过在网上查找资料,总结了一种解决方法。

效果展示

修改前页面

修改后页面

实现思路

要想使模态框在顶级页面打开,我想到的方法是使bootstrap的模态框弹在父页面弹出即可。

首先我们将需要弹出的div单独写一个页面,当子页面需要弹出时,在父页面弹出div即可。

将模态框单独写为一个页面

主页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <div class="modal fade" id="ajax" role="basic" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
        </div>
      </div>
    </div>
  </body>
  <script>
      $("#ajax").modal({
        remote: "./model.html"
      });
  </script>
</html>

模态框页面

<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
    这是模态框
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary">保存</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  </div>
</div>

这样就可以将模态框的div单独写为一个页面

修改主页面,加入子页面

修改后主页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <table width="100%" height="720px" border="1">
      <tr>
        <td>
          <iframe id="iframe1" name="iframe1" src="iframe1.html" width="100%" height="100%"></iframe>
        </td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>
          <iframe name="iframe2" src="iframe2.html" width="100%" height="100%"></iframe>
        </td>
      </tr>
    </table>
    <input type="text" id="textId" value="234" />
    <div class="modal fade" id="ajax" role="basic" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
        </div>
      </div>
    </div>
  </body>
  <script>
    function modalOut(url) {
      $("#ajax").modal({
        remote: url;
      });
    }
  </script>
</html>

这样主页面就有2个子页面,并且将弹出模态框的方法封装至modalOut(url)方法中

子页面弹出模态框

当子页面需要弹出模态框时,加载父页面中的modalOut(url)方法即可:

子页面js如下

var _iframe = window.parent;
_iframe.modalOut('xxx.html');

以上就是解决子页面中弹出模态框无法覆盖全部页面的解决办法,

注意:所以html中未加载js,请自行加载bootstrap相关的js。

总结

以上所述是小编给大家介绍的在iframe中使bootstrap的模态框在父页面弹出问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 主要内容:用法,实例,选项,方法,实例,事件,实例弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图。如需激活弹出框,用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充。该方法依赖于工具提示(tooltip)。 如果您想要单独引用该插件的功能,那么您需要引用 popover.js,它依赖于 工具提示(Tooltip)插件。或者,正如 B

  • 本文向大家介绍BootStrap中的模态框(modal,弹出层)功能示例代码,包括了BootStrap中的模态框(modal,弹出层)功能示例代码的使用技巧和注意事项,需要的朋友参考一下 bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集。务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的

  • 问题内容: 我有一个iframe,为了访问父元素,我实现了以下代码: 如何使用jQuery获得相同的结果? 更新 :或如何使用jquery访问iFrame父页面? 问题答案: 要在iFrame的父项中查找,请使用: $()包装器的第二个参数是要在其中搜索的上下文。默认为文档。

  • 本文向大家介绍整理关于Bootstrap模态弹出框的慕课笔记,包括了整理关于Bootstrap模态弹出框的慕课笔记的使用技巧和注意事项,需要的朋友参考一下 整理自慕课笔记 插件的源文件:modal.js。 在 Bootstrap 框架中把模态弹出框统一称为 Modal。这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作,也

  • 主要内容:用法,实例,选项,方法,实例,事件,实例模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 如果您想要单独引用该插件的功能,那么您需要引用 modal.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 用法 您可以切换模态框(Modal)插件

  • 问题内容: 基本上,我有一个嵌入页面的页面,并且有一些需要从父页面调用的JavaScript例程。 现在,相反的操作非常简单,因为您只需要调用,但是不幸的是,我需要恰好相反。 请注意,我的问题是不会改变的源URL的,但是调用在定义的函数。 问题答案: 假设您的iFrame的ID为“ targetFrame”,而您要调用的函数为: 您也可以使用代替访问框架。