javascript - 当模态背景不存在时，允许人们单击 Bootstrap 模态下的链接

Question

我有一个用 Bootstrap 制作的非常基本的页面。 我使用 javascript 制作了一个自动加载模式，该模式在页面加载时出现，并在 3 秒后消失。我删除了 Bootstrap 模态通常附带的灰色背景。

我希望人们能够点击页面上真正放置的文本和链接。

基本上，当模式保持打开状态(3秒)时，下面的所有链接都变得不可点击(鼠标甚至变成指针!)

这里有一个 fiddle 向您展示这种情况(请注意，当它在计算机上工作时，我不会设法让模式出现在这个jsfiddle上):http://jsfiddle.net/DTcHh/6808/ (我希望能够单击名为“例如，我希望人们能够在模式打开时单击的链接”的按钮)

HTML

<div class="container">
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Bootstrap 3</a>
        </div>


    <div class="jumbotron">
        <h1>Twitter Bootstrap 3.0</h1>
        <p class="lead">Starter template with CSS and JS included.</p>
        <p><a class="btn btn-lg btn-primary" href="http://yahoo.fr" target="_blank">Here is for example a link I'd like people to be able to click while modal is open</a></p>
      </div>

    <div class="modal in" id="notificationModal" role="dialog" aria-labelledby="notificationModalLabel" aria-hidden="true" data-backdrop="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">

        <h3 class="modal-title" id="notificationModalLabel" style="color:#DF2943;">
          How to take part in the deal?
           </h3>
      </div>
      <div class="modal-body">   
        <h4 style="margin-top:0px">
        some explanations
      </h4>

      </div>

    </div>
  </div>
</div>
</div>

JS

$(window).load(function(){
    $('#notificationModal').modal('show');    
    $('#notificationModal').fadeTo(3000, 500).slideUp(500, function(){
      $(this).remove(); 
    });

  });

如何实现这一目标？

Answer 1

或者只是这样做

.modal{
 bottom: initial!important;
}

https://jsfiddle.net/DTcHh/6811/运行这个