CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
user244394
user244394

Reputation: 13448

How to open a Bootstrap modal window using jQuery?

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

Upvotes: 987

Views: 2542369

Answers (17)

Chase
Chase

Reputation: 29549

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

Upvotes: 1809

Arthur Savage
Arthur Savage

Reputation: 31

For BS4 or BS5

If your have modal window has id="commentsDocument"

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

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

Upvotes: 0

PhillipPDX
PhillipPDX

Reputation: 94

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

Upvotes: 0

Lahiru Supunchandra
Lahiru Supunchandra

Reputation: 376

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

Upvotes: 0

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92347

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>

Upvotes: 3

Sahnosh Rahguzar
Sahnosh Rahguzar

Reputation: 349

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

Upvotes: 19

vivek
vivek

Reputation: 352

Try This

myModal1 is the id of modal

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

Upvotes: 4

gandarez
gandarez

Reputation: 2662

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

Upvotes: 105

Irshad Babar
Irshad Babar

Reputation: 1419

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

Upvotes: 13

Alperzkn
Alperzkn

Reputation: 479

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

Upvotes: 5

Nikhil Mohadikar
Nikhil Mohadikar

Reputation: 1241

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>

Upvotes: 8

csandreas1
csandreas1

Reputation: 2378

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>

Upvotes: 17

Mister Verleg
Mister Verleg

Reputation: 4293

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

Upvotes: 117

theusual
theusual

Reputation: 791

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

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

Upvotes: 11

A.Aleem11
A.Aleem11

Reputation: 1954

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>

Upvotes: 11

saneryee
saneryee

Reputation: 3405

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>

Upvotes: 19

Brane
Brane

Reputation: 3339

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

Here is example:

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

Upvotes: 25

Related Questions