How can I trigger a Bootstrap modal programmatically?

How can I trigger a Bootstrap modal programmatically?

If I go here
http://getbootstrap.com/2.3.2/javascript.html#modals
And click ‘Launch demo modal’ it does the expected thing. I’m using the modal as part of my signup process and there is server side validation involved. If there are problems I want to redirect the user to the same modal with my validation messages displayed. At the moment I can’t figure out how to get the modal to display other than a physical click from the user. How can I launch the model programmatically?

Solutions/Answers:

Solution 1:

In order to manually show the modal pop up you have to do this

$('#myModal').modal('show');

You previously need to initialize it with show: false so it won’t show until you manually do it.

$('#myModal').modal({ show: false})

Where myModal is the id of the modal container.

Solution 2:

You should’t write data-toggle=”modal” in the element which triggered the modal (like a button), and you manually can show the modal with:

$('#myModal').modal('show');

and hide with:

$('#myModal').modal('hide');

Solution 3:

If you are looking for a programmatical modal creation, you might love this:

Related:  Sharing global javascript variable of a page with an iframe within that page

http://nakupanda.github.io/bootstrap3-dialog/

Even though Bootstrap’s modal provides a javascript way for modal creation, you still need to write modal’s html markups first.

Solution 4:

HTML

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg">
  Launch demo modal
</button>

<!-- Modal -->
<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" aria-label="Close"><span aria-hidden="true">&times;</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>

JS

$('button').click(function(){
$('#myModal').modal('show');
});

DEMO JSFIDDLE

Solution 5:

you can show the model via jquery (javascript)

$('#yourModalID').modal({
  show: true
})

Demo: here

or you can just remove the class “hide”

<div class="modal" id="yourModalID">
  # modal content
</div>

Solution 6:

I wanted to do this the angular (2/4) way, here is what I did:

<div [class.show]="visible" [class.in]="visible" class="modal fade" id="confirm-dialog-modal" role="dialog">
..
</div>`

Important things to note:

  • visible is a variable (boolean) in the component which governs modal’s visibility.
  • show and in are bootstrap classes.
Related:  How to avoid no-param-reassign when setting a property on a DOM object