How to open a Bootstrap modal window using jQuery?

Bootstrap has a few functions that can be called manually on modals:

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

You can see more here: Bootstrap modal component

Specifically the methods section.

So you would need to change:

$('#my-modal').modal({
    show: 'false'
}); 

to:

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

If you're looking to make a custom popup of your own, here's a suggested video from another community member:

https://www.youtube.com/watch?v=zK4nXa84Km4

---

Most often, when $('#myModal').modal('show'); doesn't work, it's caused by having included jQuery twice. Including jQuery 2 times makes modals not to work.

Remove one of the links to make it work again.

Furthermore, some plugins cause errors too, in this case add

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

---

In addition you can use via data attribute

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

In this particular case you don't need to write javascript.

You can see more here: http://getbootstrap.com/2.3.2/javascript.html#modals

---

Just call the modal method(without passing any parameters) using jQuery selector.

Here is example:

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

---

If you use links's onclick function to call a modal by jQuery, the "href" can't be null.

For example:

... ...
<a href="" onclick="openModal()">Open a Modal by jQuery</a>
... ...
... ...
<script type="text/javascript">

function openModal(){

    $('#myModal').modal();
}       
</script>

The Modal can't show. The right code is :

<a href="#" onclick="openModal()">Open a Modal by jQuery</a>

---

Here is how to load bootstrap alert as soon as the document is ready. It is very easy just add

 $(document).ready(function(){
   $("#myModal").modal();
});

I made a demo on W3Schools.

---

Check out the complete solution here:

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_show&stacked=h

Make sure to put libraries in required order to get result:

1- First bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js

(In other words jquery.min.js must be call before bootstrap.min.js)

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script> 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

---

Try to use jQuery instead of $ sign when calling the function, it worked in my case as you can see below.

jQuery.noConflict(); 
jQuery('#myModal').modal('show'); 

jQuery.noConflict(); because when jQuery('#myModal').modal('show'); doesn't work, it's caused by having included jQuery twice. Including jQuery 2 times makes modals not to work. and it would resolve the problem in that case, as in my case it is repeating.

Further you can go to this link

Bootstrap Model Window Not Showing by Calling Through JQuery

---

<script type="text/javascript">
    $(function () {
        $("mybtn").click(function () {
            $("#my-modal").modal("show");
        });
    });
</script>

---

I tried several methods which failed, but the below worked for me like a charm:

$('#myModal').appendTo("body").modal('show');

---

Try

$("#myModal").modal("toggle")

To open or close the modal with id myModal.

If the above is not working then it means bootstrap.js has been overridden by some other js file. Here is a solution

1:- Move bootstrap.js to the bottom so that it will override other js files.

2:- Make sure the order is like below

<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Other js files -->
<script src="plugins/jQuery/bootstrap.min.js"></script>

---

<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit" id="submitButton"/>
</form>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

You can launch the modal with the code below this.

$(document).ready(function(){
    $("#submitButton").click(function(){
        $("#myModal").modal();
    });
});

---

Try This

myModal1 is the id of modal

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

---

Bootstrap 4.3 - more here

$('#exampleModal').modal();

---

Try this. It's works for me well.

function clicked(item) { alert($(item).attr("id")); } Click me