How can I trigger a Bootstrap modal programmatically?

302,217

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

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">&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

Share:
302,217

Related videos on Youtube

Hoa
Author by

Hoa

Updated on April 26, 2021

Comments

  • Hoa
    Hoa over 2 years

    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?

  • divinedragon
    divinedragon over 10 years
    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
    Claudio Redi over 10 years
    @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
    Tyrone Wilson over 10 years
    @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
    Anup Sharma about 8 years
    Is there any way to pass a custom value or parameter as option like $('#myModel').model({data:1,show:false})
  • Claudio Redi
    Claudio Redi about 8 years
    @AnupSharma: what for?
  • Anup Sharma
    Anup Sharma about 8 years
    @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
    Claudio Redi about 8 years
    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
    Anup Sharma about 8 years
    @ClaudioRedi Sorry for the late response. I used a global variable to achieve this.
  • brichins
    brichins over 7 years
    @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
    JayJay almost 7 years
    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
    Artemis almost 5 years
    Please explain what the code does when posting answers.
  • Jesus is Lord
    Jesus is Lord almost 2 years
    I had to use: dataset.bsToggle and dataset.bsTarget instead of dataset.toggle and dataset.target