How to open a Bootstrap modal window using jQuery?

Question

I'm using Twitter Bootstrap modal window functionality. When someone clicks submit on my form, I want to show the modal window upon clicking the "submit button" in the form.

<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit"/>
</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>

jQuery:

$('#myform').on('submit', function(ev) {
    $('#my-modal').modal({
        show: 'false'
    }); 


    var data = $(this).serializeObject();
    json_data = JSON.stringify(data);
    $("#results").text(json_data); 
    $(".modal-body").text(json_data); 

    // $("#results").text(data);

    ev.preventDefault();
});

informatik01 · Accepted Answer · 2024-04-23 00:02:20Z

1812

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

edited Apr 23, 2024 at 0:02

informatik01

16.5k11 gold badges79 silver badges108 bronze badges

answered Nov 1, 2012 at 18:57

Chase

29.6k1 gold badge52 silver badges49 bronze badges

Add a comment |

Talha Awan · Accepted Answer · 2017-08-12 00:06:50Z

117

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');

edited Aug 12, 2017 at 0:06

Talha Awan

4,6194 gold badges26 silver badges40 bronze badges

answered Jan 19, 2016 at 7:24

Mister Verleg

4,3336 gold badges50 silver badges72 bronze badges

Add a comment |

npretto · Accepted Answer · 2019-05-31 16:52:20Z

105

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

edited May 31, 2019 at 16:52

npretto

1,1259 silver badges19 bronze badges

answered Aug 28, 2013 at 17:11

gandarez

2,6724 gold badges37 silver badges48 bronze badges

Add a comment |

Brane · Accepted Answer · 2016-02-06 19:21:24Z

25

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

Here is example:

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

answered Feb 6, 2016 at 19:21

Brane

3,3392 gold badges45 silver badges55 bronze badges

Seems that show is the default parameter to modal() but I cannot find it here
– Timo
Commented Jul 9, 2022 at 18:25

Add a comment |

saneryee · Accepted Answer · 2016-04-18 06:42:04Z

19

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>

answered Apr 18, 2016 at 6:42

saneryee

3,41534 silver badges22 bronze badges

Add a comment |

Csaba Toth · Accepted Answer · 2020-02-14 18:40:15Z

19

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

edited Feb 14, 2020 at 18:40

Csaba Toth

10.8k6 gold badges85 silver badges143 bronze badges

answered Dec 8, 2019 at 11:09

Sahnosh Rahguzar

3492 silver badges2 bronze badges

Add a comment |

csandreas1 · Accepted Answer · 2017-08-26 14:05:10Z

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.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Here is how to load a bootstrap modal as soon as the document is ready </h2>
  <!-- Trigger the modal with a button -->


  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

<script>
$(document).ready(function(){
   $("#myModal").modal();
});
</script>

</body>
</html>

Irshad Babar · Accepted Answer · 2018-12-13 23:55:08Z

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

A.Aleem11 · Accepted Answer · 2017-01-14 21:16:43Z

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>

theusual · Accepted Answer · 2017-06-08 03:33:40Z

11

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

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

answered Jun 8, 2017 at 3:33

theusual

7913 gold badges11 silver badges28 bronze badges

Add a comment |

Nikhil Mohadikar · Accepted Answer · 2017-11-07 11:55:26Z

8

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>

edited Nov 7, 2017 at 11:55

answered Nov 7, 2017 at 11:49

Nikhil Mohadikar

1,24115 silver badges10 bronze badges

1

There should be a semicolumn at the end, preferabley. $("#myModal").modal("toggle");
– london_utku
Commented Dec 18, 2021 at 1:12

Add a comment |

marc_s · Accepted Answer · 2018-10-31 21:37:03Z

<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();
    });
});

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

Try This

myModal1 is the id of modal

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 29, 2019 at 10:43

vivek

3522 silver badges10 bronze badges

Add a comment |

Kamil Kiełczewski · Accepted Answer · 2020-05-13 22:26:03Z

Bootstrap 4.3 - more here

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

<!-- Initialize Bootstrap 4 -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<!-- MODAL -->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
    
      <div class="modal-body">
        Hello world   
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

Lahiru Supunchandra · Accepted Answer · 2020-07-13 13:29:30Z

Try this. It's works for me well.

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<button onclick="clicked(this);" id="modalME">Click me</button>

<!-- Modal -->
  <div class="modal" id="modalME" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-header">
        <h2>Modal in CSS</h2>
        <a href="#close" class="btn-close" aria-hidden="true">×</a> <!--CHANGED TO "#close"-->
      </div>
      <div class="modal-body">
        <p>One modal example here.</p>
      </div>
      <div class="modal-footer">
        <a href="#close" class="btn">Nice!</a>  <!--CHANGED TO "#close"-->
      </div>
      </div>
    </div>
  </div>
  <!-- /Modal -->

Paolo · Accepted Answer · 2024-01-21 01:12:27Z

0

None of the solutions above worked for me in Bootstrap 4.5.

This was the most effective way that I found to ensure that a modal opened from another modal is placed on top.

Add this to your CSS:

/* Use this for Stacked Modals in BS 4.5 */
.modal:nth-of-type(even) {
    z-index: 1052 !important;
}

.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}

Simply call your modal from JQuery:

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

edited Jan 21, 2024 at 1:12

Paolo

21.2k21 gold badges76 silver badges122 bronze badges

answered Dec 2, 2023 at 12:22

PhillipPDX

942 silver badges10 bronze badges

Add a comment |

Arthur Savage · Accepted Answer · 2024-01-29 08:01:51Z

0

For BS4 or BS5

If your have modal window has id="commentsDocument"

// Open modal window  
$("#commentsDocument").modal("show")

// Hide modal window  
$("#commentsDocument").modal("hide")

edited Jan 29, 2024 at 8:01

answered Jan 11, 2024 at 10:24

Arthur Savage

294 bronze badges

Add a comment |

Collectives™ on Stack Overflow

How to open a Bootstrap modal window using jQuery?

17 Answers 17

Try This

Linked

Hot Network Questions

Collectives™ on Stack Overflow

17 Answers 17

Try This

Linked

Related