javascript - Allow people to click on links under bootstrap modal when modal backdrop is not present - Stack Overflow

admin管理员组

文章数量:1400366

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 es 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.

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

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 puter): / (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="" 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(); 
    });

  });

How to achieve this?

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 es 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.

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

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 puter): http://jsfiddle/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(); 
    });

  });

How to achieve this?

• javascript
• jquery
• html
• twitter-bootstrap
• twitter-bootstrap-3

Share Improve this question Follow edited Apr 19, 2015 at 16:48 Mathieu asked Apr 19, 2015 at 16:34 MathieuMathieu 4,8071313 gold badges6464 silver badges126126 bronze badges 8

• you need to override the modal's overlay class and set the z-index propety to -1; – vinayakj Commented Apr 19, 2015 at 16:37
• i'm a beginner : how do you remove the overlay ? i thought I was doing it by already putting data-backdrop="false" in my code ; and which class/div should I put on z property=-1 ? – Mathieu Commented Apr 19, 2015 at 16:40
• ohh I see.. then I need to see what html it is generating – vinayakj Commented Apr 19, 2015 at 16:43
• I added the css: .modal-backdrop { z-index: -1; } but I still have the same problem – Mathieu Commented Apr 19, 2015 at 16:45
• 1 jsfiddle/DTcHh/6808 ... You need to use document.ready – Shawn31313 Commented Apr 19, 2015 at 16:46

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 3

or just do this

.modal{
 bottom: initial!important;
}

https://jsfiddle/DTcHh/6811/ run this

Just set style="z-index: 2000; position: relative;" for the links you want to be clickable. Without position: relative, the z-index won't work.

The problem is that the modal is taking up the entire width and height of the page, so when you try to click on the link, you are really hitting the modal. You can't fix this with z-index because you need the modal content to be above the rest of the page, but the modal background to be behind it. This is impossible.

The easiest fix is to set the width and height of the modal manually, so it takes up less space and the link is clickable. So in your fiddle add this css:

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

And it should work. You can play with those dimensions as you want as well.

Also, to make your fiddle actually show the modal, remove your $(window).load wrapper in the JS and just click the Run button.

本文标签：