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

Question

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

我希望人们能够单击真正放置在页面上的文本和 link。

基本上，当模式保持打开状态（3 秒）时，下面的所有 link 都无法点击（鼠标甚至变成指针！）

这里 fiddle 向您展示情况（请注意，虽然它在计算机上可以正常工作，但我并没有设法让模态出现在这个 jsfiddle 上）：http://jsfiddle.net/DTcHh/6808/（我希望能够单击名为“例如，这里是一个 link 我希望人们能够在模态打开时单击的按钮”）

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

问题是模态框占据了页面的整个宽度和高度，因此当您尝试单击 link 时，您实际上是在点击模态框。您不能使用 z-index 解决此问题，因为您需要模态内容位于页面其余部分之上，但模态背景位于其后面。这是不可能的。

最简单的修复方法是手动设置模态框的宽度和高度，这样它占用的空间更少 space 并且 link 可以点击。所以在你的 fiddle 添加这个 css:

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

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

此外，要使您的 fiddle 实际显示模态，请删除 JS 中的 $(window).load 包装器，然后单击运行按钮。

Answer 3

或者只是这样做

.modal{
 bottom: initial!important;
}

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

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

Allow people to click on links under bootstrap modal when modal backdrop is not present

html

javascript

jquery

twitter-bootstrap

twitter-bootstrap-3