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

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

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

因此,您可以选择10个按钮或链接,并将data-target属性放入相应的模式,如下所示:

Open Modal

然后你会把10个模态与不同的ID放在一起,如下所示.

  


    
    

      

        ×
        
Modal Header
      
      

        
Some text in the modal.
      
      

        Close
      
    

  

如果您希望搜索引擎索引模态的内容并且您希望模式可以轻松访问并快速加载,那么这将是最好的.

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

所以你的链接看起来像

Modal

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

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

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

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

     

          

          ×
          
My Dynamic Modal
      
      
      

      
      

        Close
      
  



Page 1 Modal Content



Page 2 Modal Content

然后你会创建另一个html页面,如下面我在上面的链接中命名为1.html,但你可以命名它,只需在主页面的链接中更改它.

      
Some Other Page Content
      

           My modal content
      

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

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