Question

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

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

基本上，当模态保持打开状态（3秒）时，下面的所有链接都变得不可点击（鼠标变成指针！）

这是一个向你展示情况的小提琴（请注意，我不会让这个模态出现在这个jsfiddle上，而它可以在计算机上运行）：http://jsfiddle.net/DTcHh/6808/（我喜欢能够点击名为＆＃39;的按钮，例如，我希望人们能够在模态打开时点击这个链接＆＃39;）

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

只需为要点击的链接设置style="z-index: 2000; position: relative;"即可。如果没有position: relative，则z-index将无效。

Answer 2

问题是模态占据了页面的整个宽度和高度，所以当你尝试点击链接时，你真的会遇到模态。你不能用z-index解决这个问题，因为你需要模态内容高于页面的其余部分，但背后的模态背景。这是不可能的。

最简单的解决方法是手动设置模态的宽度和高度，因此占用的空间更少，链接也是可点击的。所以在你的小提琴中添加这个css：

.modal {
    width:500px;
    height:150px;
}

它应该有效。您也可以根据需要使用这些尺寸。

另外，为了让你的小提琴实际显示模态，删除JS中的$(window).load包装器，只需单击“运行”按钮。

Answer 3

或只是这样做

.modal{
 bottom: initial!important;
}

https://jsfiddle.net/DTcHh/6811/运行此

当模态背景不存在时，允许人们点击bootstrap模式下的链接

3 个答案: