Nat*_*lie 15 html twitter-bootstrap
我有一个页面,我需要点击右侧和左侧的链接,并显示模式对话框.我在bootstrap的网站上看到每个模态对话框的代码至少有10行html.如果我在页面上有10个链接,那么为10个对话框提供代码的最佳做法是什么？我是否将对话框的所有HTML放在同一个.html页面中？
Ste*_*e K 32
为了扩展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">×</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">×</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然后创建片段更好一点,如果搜索引擎为您的网站编制索引,他们可以索引您的模态内容,当人们链接到它时,将有一整页供他们查看.他们仍然不会将您的模态内容与原始页面相关联,但他们将按照链接并单独索引页面.
我希望这能为你解决所有问题.
| 归档时间： |
|
| 查看次数： |
65679 次 |
| 最近记录： |