modal 内部的链接在打开 modal 并弄乱页面界面之前出现答案

【问题标题】：links inside modal appearing before opening the modal and messing up the page interfacemodal 内部的链接在打开 modal 并弄乱页面界面之前出现
【发布时间】：2016-08-19 20:11:50
【问题描述】：

我有一个模态，当单击按钮时会出现，但是模态内部的链接甚至在打开模态之前就出现了，尽管它们是不可见的，但是它们存在是因为如果用户单击页面，模态内部的链接就会得到点击。

要查看它，请打开 filemile.ga 并将鼠标悬停在徽标上。

<button type="button" class="btn btn-info btn-sm " data-toggle="modal" data-target="#myModal">more</button>

 <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog"  >
    <div class="modal-dialog modal-lg">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h2 class="modal-title">Top Searches</h2>
        </div>
        <div class="modal-body">

  lots of links here
     <p>Link1</p>
     <p>Link2</p>
     <p>Link3</p>       

</div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

【问题讨论】：

你能创建一个小提琴并重现这个吗？我可以用这段代码很好地看到链接。
打开 filemile.ga 并将鼠标悬停在徽标上 @pmahomme
是“logo”还是“更多”按钮？
更多按钮打开模态对话框，但是您已经可以看到页面徽标上的链接，它们是不可见的，但是当您单击它时，它会打开链接@v.coder
不知何故我在徽标附近看不到任何链接..你能粘贴带有链接的屏幕截图吗..

标签： javascript jquery html twitter-bootstrap modal-dialog

【解决方案1】：

将<div class="modal fade" id="myModal" role="dialog" > 替换为<div class="modal fade hide" id="myModal" role="dialog" > 这个隐藏类将设置您的模态不可访问，当您单击按钮时，引导程序会将其关闭。

您评论的这个网站使用 Bootstrap 2.3 link to documentation。如果您对其进行编辑，本网站将为您提供帮助。

【讨论】：

它工作正常，但单击按钮时模式不显示

【解决方案2】：

我只是和一个似乎可以解决的 CSS 样式。

在 Modal 的第一个 div 上，其 id 为 myModal 只需添加以下内容：

<div class="modal fade" id="myModal" role="dialog" style="display:none;">

【讨论】：