CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3
Mathieu
Mathieu

Reputation: 4787

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

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.

Bascially, while the modal stays open (3 sec), all the links below become unclickable (the mouse becomes 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 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(); 
    });

  });

How to achieve this?

Upvotes: 0

Views: 4730

Answers (3)

vinayakj
vinayakj

Reputation: 5681

or just do this

.modal{
 bottom: initial!important;
}

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

Upvotes: 3

Jonathan
Jonathan

Reputation: 123

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.

Upvotes: 2

Oleg K.
Oleg K.

Reputation: 1549

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.

Upvotes: 3

Related Questions