Question

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

Answer 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片段可以命名为myhtmlsnippet.php，并将其放在href和data-remote属性中。然后只需将html片段加载到一个模态的模态体中。

然后你应该添加以下脚本，这样每次模态关闭时都会清除模态中的内容。

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

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

您还可以制作完整的html页面，并将该页面中的一个div动态加载到您的模态中。这对seo更好，你不必用robots.txt排除内容。下面是一个完整的html页面，其中包含一个工作示例。除非您在服务器上加载ajax，但是您可以复制并粘贴它们以查看它们的工作情况，因此这些显然不起作用。你也会像我在下面那样重构模态，并像下面一样重新设置它作为bootstraps远程加载其模态加载到模态内容中。我还将类可清除内容添加到模态内容并更改了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>

这种方法对于seo然后创建片段更好一点，如果搜索引擎为您的网站编制索引，他们可以索引您的模态内容，当人们链接到它时，将有一整页供他们查看。他们仍然不会将您的模态内容与原始页面相关联，但他们将按照链接并单独索引页面。

我希望这能为你解决所有问题。

Answer 2

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

如果你想让它们内联，是的，你必须将所有的html放在主页面中。因此，当用户单击链接时，内容已经存在并且可以立即呈现。

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

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

在一个页面中使用多个模态对话框

2 个答案: