从另一个页面打开模式弹出窗口答案

【问题标题】：Open modal popup from another page从另一个页面打开模式弹出窗口
【发布时间】：2020-12-30 08:10:32
【问题描述】：

所以在我的网站中，我有一个导航栏。该栏上的第一个“按钮”打开一个modal pop box。该模态框是由 4500 行创建的。我可以将模态框代码添加到另一个页面（例如modalView.php）并从index.php 打开它，而不离开 index.php？

【问题讨论】：

你绝对可以把它解压到另一个页面，发出ajax请求按需获取，然后使用。
@Taplar 这和使用 iframe 一样吗？还是您建议使用 Ajax 而不是 iframe？
您可以将 iframe 粘贴到模式中，但如果您要这样做，我只需发出 ajax 请求并将响应放入模式中。但是，归根结底，这只是我的意见
您可以使用您喜欢的搜索引擎来搜索“Javascript, ajax”或“Javascript, fetch”。应该有很多可用的例子可以分解和学习。

标签： javascript php html

【解决方案1】：

我认为您可以使用 boostrap 打开弹出模式。并将 iframe url 放在模态框内。所以你可以防止离开 index.php。这是一个小例子：

<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</head>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Iframe inside modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <!-- change the src -->
        <iframe width="100%" hight="auto" src="https://stackoverflow.com/">
</iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</html>

模态助推器 References

希望对您有所帮助。谢谢！

【讨论】：

【解决方案2】：

您可以将iframe 放在您的模态中。 html iframe 用于在另一个网页上显示外部网页，因此只需在您的 modal 中放置一个iframe，例如<iframe src="/somepage.html"></iframe>。您可以使用 CSS 设置 iframe 的样式（即宽度、高度）。

【讨论】：

按a href链接时如何打开iframe？
你可以使用target，即。
但是对于模态框，您可以将 iframe 放入模态框。
我个人认为这是最简单的方法。
你可以在这里看到更多：w3schools.com/html/html_iframe.asp