当不存在模态背景时，允许人们单击引导模态下的链接 [英] Allow people to click on links under bootstrap modal when modal backdrop is not present

问题描述

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

I have a very basic page made with Bootstrap. Using javascript I made an auto-loading modal that appears when the page loads and disappears after 3 seconds. I removed the grey backdrop that usually comes along Bootstrap modals.

我希望人们能够单击页面上实际放置的文本和链接.

What I'd like it for people to be able to click on the text and links that are really placed on the page.

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

Bascially, while the modal stays open (3 sec), all the links below become unclickable (the mouse becomes a pointer even!)

以下是用来向您展示情况的小提琴(请注意，当它在计算机上运行时，我不希望使模式出现在此jsfiddle上):

Here is a fiddle to show you the situation (note that I don't mange to make the modal appear on this jsfiddle while it does work on computer): http://jsfiddle.net/DTcHh/6808/ (I'd like to be able to click on the button called 'Here is for example a link I'd like people to be able to click while modal is open')

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(); 
    });

  });

如何实现?

推荐答案

或者只是这样做

.modal{
 bottom: initial!important;
}

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

这篇关于当不存在模态背景时，允许人们单击引导模态下的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！