How can I trigger a Bootstrap modal programmatically?

Question

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?

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:

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

This is a code for Bootstrap v5 without jQuery.

let myModal = new bootstrap.Modal(document.getElementById('myModal'), {});
myModal.show();

Demo

And this is a codesandbox demo to open modal on page load programmatically.

https://idu6i.csb.app/

Refs

• https://getbootstrap.com/docs/5.0/components/modal/#via-javascript
• https://getbootstrap.com/docs/5.0/components/modal/#show

Solution 5

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">×</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

View more solutions

Comments

[divinedragon]

Thanks. That worked out. One observation however is that, when I the modal box opens, it resets the scrolling and if I triggered the modal box from the bottom of page, the page gets scrolled to top. How should I stop that?

[Claudio Redi]

@tdubs: weird, it should work. See latest modal code github.com/twitter/bootstrap/blob/master/js/bootstrap-modal.‌​js. So far I see, it should still working

[Tyrone Wilson]

@ClaudioRedi, I tried both in the console, I find that only one works using chromium. $('#myModal').modal({show: false}) doesn't work but $('#myModal').modal('hide') works. Not sure why

[Anup Sharma]

Is there any way to pass a custom value or parameter as option like $('#myModel').model({data:1,show:false})

[Claudio Redi]

@AnupSharma: what for?

[Anup Sharma]

@ClaudioRedi In a situation when I need to pass any information to the model. Example: Say I have a tree Structure and I right click on any node and click Edit Details. And that triggers a modal with editable form and save to db using id stored in the node. now I need to pass this id to model using $('#myModal').modal({data:1}); but the problem is I can't access this value within Modal form

[Claudio Redi]

I'd say you can use standard data() jquery method: $('#myModal').data('data', 1) and then you can do $('#myModal').data('data') to get stored value. In any case, I recommend you to create a separated question since your problem is not related to original question :)

[Anup Sharma]

@ClaudioRedi Sorry for the late response. I used a global variable to achieve this.

[brichins]

@divinedragon ages later I know, but the issue with scrolling to the top of the page is likely due to triggering the popup with a tag like '<a href='#'> and failing to return false or preventDefault inside the handler. The browser is doing as instructed and scrolling to the default anchor - the top of the page. I've had this bite me several times as our CSS sometimes relies on having a href set for the styling to match.

[JayJay]

I have a URL that opens the modal with data-toggle. Then inside the modal I have a button that calls a function which last thing it does is closing the modal using the hide method you suggest. Great!

[Artemis]

Please explain what the code does when posting answers.

[Jesus is Lord]

I had to use: dataset.bsToggle and dataset.bsTarget instead of dataset.toggle and dataset.target