Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Showing Bootstrap modal after a delay [duplicate]

How can I show a Bootstrap modal after 2 seconds without triggering the modal via a button?

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
like image 703
Stanley Tan Avatar asked Dec 10 '14 06:12

Stanley Tan


People also ask

How do you make a modal not closable?

On Options chapter, in the page you linked, you can see the backdrop option. Passing this option with value 'static' will prevent closing the modal. As @PedroVagner pointed on comments, you also can pass {keyboard: false} to prevent closing the modal by pressing Esc .

How do you trigger a modal?

To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.

How do I stop bootstrap modal closing?

If you want to prevent boostrap modal from closing by those actions, you need to change the value of backdrop and keyboard configuration. The default value of backdrop and keyboard is set to true . You can change the configuration in HTML or Javascript directly.

Is bootstrap modal responsive?

Bootstrap modals are supposed to be responsive by default. Something to look out for is if you have a width set on your Modal. For example I had a form body container inside of my modal with a height of 40rem.


1 Answers

Assume you have loaded the bootstrap js file, Use setTimeout() Event. Also take a look on bootstrap docs

setTimeout(function() {
    $('#myModal').modal();
}, 2000);
like image 118
jogesh_pi Avatar answered Oct 10 '22 07:10

jogesh_pi