个人中心
gpt4 book ai didi

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

转载 作者：技术小花猫 更新时间：2023-10-29 12:18:01 25 4
gpt4 key购买 nike

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

最佳答案

为了扩展 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，但你可以复制并粘贴它们以查看它们的工作。此外，您还需要像我在下面所做的那样重组模态，并像我在下面所做的那样重新设置它的样式，因为 Bootstrap 将其模态的远程加载加载到模态内容中。我还将类 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>

然后您将制作另一个 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 比创建片段要好一些，如果搜索引擎索引了您的网站，他们可以索引您的模态内容，当人们链接到它时，他们将看到一个完整的页面。他们仍然不会将您的模态内容与原始页面相关联，但他们会跟踪链接并单独为页面编制索引。

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

关于html - 在一个页面中使用多个模态对话框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34427926/

25 4 0
文章推荐： html - Safari 不承认 "required"属性。如何解决？
文章推荐： linux - 在本地运行 Hydra (mpiexec) 会出现奇怪的 SSH 错误
文章推荐： javascript - Angular 2单选按钮事件
文章推荐： regex - Unix/Linux/FreeBSD 使用 Perl 正则表达式查找命令
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com