Question

我有一个模态，当单击一个按钮时出现，但模态内部的链接出现在打开模态之前，它们虽然看不见但它们存在，因为如果用户点击页面，模态中的链接会得到点击。

要查看它，请打开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>

Answer 1

将<div class="modal fade" id="myModal" role="dialog" >替换为<div class="modal fade hide" id="myModal" role="dialog" > 此隐藏类将设置您的模式不可访问，当您单击按钮时，引导程序将取消它。

您评论的此网站使用Bootstrap 2.3 link to documentation。如果你编辑它，这个网站会帮助你。

Answer 2

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

在Modal的第一个div上，其id为 myModal ，只需添加flolow：

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

在打开模态之前出现模态内部的链接并弄乱页面界面

2 个答案: