在一个页面中使用多个模式对话框答案

【问题标题】：Using multiple modal dialogs in one page在一个页面中使用多个模式对话框
【发布时间】：2015-12-23 02:57:26
【问题描述】：

我有一个页面，我需要单击右侧和左侧的链接，并显示模态对话框。我在引导程序的网站上看到每个模式对话框的代码至少有 10 行 html。如果我在页面上有 10 个链接，那么获得 10 个对话框的代码的最佳做法是什么？我是否将对话框的所有 HTML 放在同一个 .html 页面中？

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

为了扩展 Phoenix 给出的答案，内联意味着您是否希望在页面加载时加载内容并且易于访问。因此，您会将所有 10 个模式都放在页面上，这样当页面加载时，内容就已经存在，然后您只需单独链接到每个模式。

因此，您将放置 10 个按钮或链接，无论您选择什么，并将 data-target 属性放入相应的模式，如下所示：

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

然后您将放置 10 个具有不同 ID 的模态，如下所示。

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

如果您希望搜索引擎为模态框的内容编制索引，并且希望模态框易于访问和快速加载，这将是最佳选择。

或者您可以只在页面上放置一个模式并通过 ajax 远程加载您的所有内容。

所以你的链接看起来像

<a data-toggle="modal" href="Path/To/Code/Snippet" data-remote="Path/To/Code/Snippet" data-target="#myModal">Modal</a>

您只需将其中一个模态框放在页面上，然后通过该模态框加载您的所有内容。您的 html sn-ps 您可以将其命名为 myhtmlsn-p.php 并将其放在 href 和 data-remote 属性中。然后只有 html sn-ps 将被加载到一个 modal 的 modal-body 中。

然后您应该添加以下脚本，以便每次关闭模式时都会清除模式中的内容。

<script>
$(document).on('hidden.bs.modal', function (e) {
    var target = $(e.target);
    target.removeData('bs.modal')
    .find(".modal-body").html('');
});
</script>

这对于视频之类的东西很有用。如果您要加载 10 个不同的视频，那么加载页面将花费大量时间。但是搜索引擎不会将此远程加载的内容与您的链接所在的页面相关联，他们将单独搜索它们，从那时起只是代码 sn-ps，您将希望使用 robots.txt 让它们不索引这些 sn-ps。

您还可以制作完整的 html 页面，然后将该页面中的一个 div 动态加载到您的模式中。这对 seo 更好，您不必使用 robots.txt 排除内容。下面是带有工作示例的完整 html 页面。除非您在服务器上工作，否则这些显然不起作用，因为服务器加载了 ajax，但您可以复制并粘贴它们以查看它们的工作。此外，您将希望像我在下面所做的那样重组模态，并像下面那样重新设置它的样式，因为引导程序远程加载其模态加载到模态内容中。我还在 modal-content 中添加了 clearable-content 类并更改了 jquery 脚本，因此如果页面上有其他模式，它不会只清除动态加载的内容。这是一个工作示例。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
.modal-title {
  text-align:center;
  font-size:20px;
  font-weight:bold;
}
@media screen and (min-width: 768px){
  #myModal .modal-dialog {
    webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
  }
}
#myModal .modal-header {
  border-radius: 5px 5px 0 0;
  background-color:#fff;
}
#myModal .modal-content {
  background-color:#fff;
  border-radius: 0;
  padding:20px;
  box-shadow: none;
  background-clip:inherit;
}
#myModal .modal-footer {
  background-color:#fff;
  border-radius: 0 0 5px 5px;
}
</style>
</head>
<body>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
     <div class="modal-dialog">
          <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <p class="modal-title">My Dynamic Modal</p>
      </div>
      <!-- Modal content-->
      <div class="modal-content clearable-content">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
  </div>
</div>


<a data-toggle="modal" href="2.html" data-remote="1.html #modal-section" data-target="#myModal">Page 1 Modal Content</a>
<br /><br />
<a data-toggle="modal" href="3.html" data-remote="2.html #modal-section" data-target="#myModal">Page 2 Modal Content</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(document).on('hidden.bs.modal', function (e) {
    var target = $(e.target);
    target.removeData('bs.modal')
    .find(".clearable-content").html('');
});
</script>
</body>
</html>

然后，您将创建另一个 html 页面，如下面的，我在上面的链接中将其命名为 1.html，但您可以将其命名为任何名称，只需在主页的链接中更改它即可。

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
      <p>Some Other Page Content</p>
      <div id="modal-section">
           My modal content
      </div>
</body>
</html>

这种方法比创建 sn-ps 更适合 seo，如果搜索引擎索引您的网站，他们可以索引您的模态内容，当人们链接到它时，他们会看到一个完整的页面。他们仍然不会将您的模态内容与原始页面相关联，但他们会跟随链接并单独索引页面。

我希望这可以为您解决所有问题。

【讨论】：

我在尝试打开和关闭多个模式时经历了一段痛苦的时光，但几个月来都没有运气。我遇到了这个答案，虽然我不需要这里的一切，但它解决了我的问题。谢谢！如果它对其他人有帮助，我使用以下内容来解决我的问题。 $('#yourModalID').removeData('bs.modal');

【解决方案2】：

这取决于您希望如何加载对话框内容。

如果您希望它们内联，是的，您必须将所有 html 放在主页中。所以当用户点击链接时，内容已经存在并且可以立即呈现。

如果您希望它们仅在有人单击链接时加载，您可以在模态框内使用 iframe，或使用 ajax 加载部分内容。检查模态文档中的远程部分。

或者，如果你想要内联模态但你的模态内容略有不同，你可以检查这个 http://getbootstrap.com/javascript/#modals-related-target

【讨论】：