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

Using multiple modal dialogs in one page

提问by Natalie

I have a page where I need to click on links on right hand side and left hand side, and display modal dialogs. I am seeing on bootstrap's site that the code for each modal dialog is at least 10 lines of html. If I have 10 link on the page, what's the best practice to do to have the code for the 10 dialogs? Do I put all the HTML for the dialogs in the same .html page?

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

回答by Steve K

To expand on the answer that Phoenix gave, inline means do you want the content to be loaded when the page loads and be readily accessable. So yo would put all of the 10 modals on the page so when the page loads the content would be already there and then you would just link to each modal individually.

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

So you would put 10 buttons or links whatever you choose and put the data-target attribute to the corresponding modal like the following:

因此，无论您选择什么，您都可以放置 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>

And then you would put 10 modals with different ID's like the following.

然后你会放置 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>

This would be the best if you want search engines to index the content of the modals and if you want the modals to be readily accessable and load quickly.

如果您希望搜索引擎索引模态的内容，并且您希望模态易于访问并快速加载，这将是最好的。

Or you can just put one modal on the page and load all of your content remotely though ajax.

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

So your link would look like

所以你的链接看起来像

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

And you would just put one of the modals on the page and load all of your content through that modal. Your html snippets you can name like myhtmlsnippet.php and put that in the href and data-remote attributes. Then just the html snippets will be loaded into the modal-body of the one modal.

您只需在页面上放置一个模态并通过该模态加载所有内容。您可以将您的 html 片段命名为 myhtmlsnippet.php 并将其放在 href 和 data-remote 属性中。然后只有 html 片段将被加载到一个模态的模态主体中。

Then you should add the following script so that each time the modal closes it clears the content from the modal.

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

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

This is good for things like videos and such. If you have 10 different videos that you want to load then it will take an excessive amout of time for your page to load. But search engines will not associate this remotely loaded content with the page your links are on they will search them individually and since then are just code snippets you will want to use robots.txt to have them not index these snippets.

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

You can also make full html pages and just load one div from that page into your modal dynamically. This is better for seo and you dont have to exclude the content with robots.txt. Below is a full html page with a working example. These will obviously not work unless you are working on a server as ajax is loaded by the server but you can copy and paste them to see them work. Also you will want to restructure the modal like I did below and restyle it like I have below as bootstraps remote loading of its modals loads into the modal content. I have also added the class clearable-content to the modal-content and changed the jquery script so if you have other modals on the page it will not clear their content just the dynamically loaded content. Here is a working example.

您还可以制作完整的 html 页面，然后从该页面动态加载一个 div 到您的模态中。这对 seo 更好，您不必使用 robots.txt 排除内容。下面是一个带有工作示例的完整 html 页面。这些显然不会起作用，除非您在服务器上工作，因为服务器加载了 ajax，但您可以复制和粘贴它们以查看它们的工作情况。此外，您还需要像我在下面所做的那样重构模态，并像下面那样重新调整它的样式，因为引导程序远程加载其模态将加载到模态内容中。我还将类 clearable-content 添加到 modal-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>

Then you would make another html page like the one below I have named it 1.html in the links above but you can name it anything and just change it in your links in your main page.

然后，您将创建另一个 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>

This method is a little better for seo then creating snippets and if a search engine indexes your site they can index your modals content and when people link to it there will be a full page for them to see. They still will not associate your modals content with the original page but they will follow the link and index the pages individually.

这种方法对于 seo 来说比创建片段要好一些，如果搜索引擎索引您的网站，他们可以索引您的模态内容，当人们链接到它时，他们会看到一个完整的页面。他们仍然不会将您的模态内容与原始页面相关联，但他们会按照链接单独索引页面。

I hope this clears everything up for you.

我希望这可以为您清除一切。

回答by Phoenix

That depends on how you want to load your dialogs' content.

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

If you want them inline, yes, you have to put all the html in the main page. So when user click the link, the content is already there and can be rendered immediately.

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

If you want them loaded only when someone clicked the link, you can use iframe inside the modal, or use ajax to load the partial content. check remote section in the modal documentation.

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

Or, if you want inline modal but your modals have slightly different content, you can check this http://getbootstrap.com/javascript/#modals-related-target

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