在一个页面中使用多个模式对话框 [英] Using multiple modal dialogs in one page

问题描述

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

解决方案

为了扩展Phoenix给出的答案，内联意味着您希望在页面加载时加载内容并成为随时可以访问。所以哟会把所有的10个模块放在页面上，所以当页面加载内容时已经在那里，然后你就可以单独链接到每个模态。

因此，您可以将10个按钮或链接放在您选择的任何位置，并将data-target属性设置为相应的模式，如下所示：

 <！ - 用按钮触发模态 - > 
< button type =buttonclass =btn btn-info btn-lgdata-toggle =modaldata-target =＃myModal>打开模式< / button> 
  

然后你会把10个不同的ID放在下面。

 <！ -  Modal  - > 
< div id =myModalclass =modal faderole =dialog> 
< div class =modal-dialog> 
 
 <！ - 模态内容 - > 
< div class =modal-content> 
< div class =modal-header> 
< button type =buttonclass =closedata-dismiss =modal>& times;< / button> 
< h4 class =modal-title>模态头< / h4> 
< / div> 
< div class =modal-body> 
< p>模式中的部分文字。< / p> 
< / div> 
< div class =modal-footer> 
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< / button> 
< / div> 
< / div> 
 
< / div> 
< / div> 
  

如果您希望搜索引擎将模式的内容编入索引，并且您希望这些模块可以随时访问并加载。

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

因此，您的链接看起来像

 < a data-toggle =modal href =Path / To / Code / Snippetdata-remote =Path / To / Code / Snippetdata-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加载到您的模态中即可。这对于s​​eo更好，而且您不必使用robots.txt排除内容。下面是一个完整的HTML页面，并附有一个工作示例。这些显然不起作用，除非你正在服务器上工作，因为服务器装载了Ajax，但你可以复制并粘贴它们以查看它们的工作。你也会想重新调整模态，就像我在下面做的那样，并重新调整模态，就像我在下面将模态加载到模态内容的引导程序远程加载一样。我还将类可清除内容添加到模态内容中，并更改了jquery脚本，因此如果页面上有其他模式，它将不会清除它们的内容，只是动态加载的内容。这是一个工作示例。

 <！DOCTYPE html> 
< html lang =en> 
< head> 
< link rel =stylesheethref =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，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 =myModalclass =modal faderole =dialog> 
< div class =modal-dialog> 
< div class =modal-header> 
< button type =buttonclass =closedata-dismiss =modal>& times;< / button> 
< p class =modal-title> My Dynamic Modal< / p> 
< / div> 
 <！ - 模态内容 - > 
< div class =modal-content clearable-content> 
< / div> 
< div class =modal-footer> 
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< / button> 
< / div> 
< / div> 
< / div> 
 
 
 < br />< br /> 
  
< 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>其他一些网页内容< / p> 
< div id =modal-section> 
我的模态内容
< / div> 
< / body> 
< / html> 
  

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

我希望这会为您清除所有内容。

p>

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?

解决方案

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.

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

<!-- 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.

<!-- 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.

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.

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.

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.

<!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.

<!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.

I hope this clears everything up for you.

这篇关于在一个页面中使用多个模式对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！