dimanche 19 avril 2015

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://ift.tt/1bbSLib (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?


Aucun commentaire:

Enregistrer un commentaire