Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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(); }); 
like image 278
user244394 Avatar asked Nov 01 '12 18:11

user244394


People also ask

How do I open a Bootstrap modal window?

To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.

Does Bootstrap modal require jQuery?

Bootstrap 5 is designed to be used without jQuery, but it's still possible to use our components with jQuery. If Bootstrap detects jQuery in the window object it'll add all of our components in jQuery's plugin system; this means you'll be able to do $('[data-bs-toggle="tooltip"]').

How do you display a modal in JavaScript?

To open a modal, we'll need any element with the data-open attribute (normally a button ). The value of this attribute should be the ID of the desired modal. By default, a modal will close if we click outside its boundaries or when the Esc key is pressed.

How do I make Bootstrap modal open by default?

Answer: Use the Bootstrap . modal('show') method modal('show') method for launching the modal window automatically when page load without clicking anything.


2 Answers

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

like image 199
Chase Avatar answered Sep 18 '22 12:09

Chase


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');  
like image 26
Mister Verleg Avatar answered Sep 18 '22 12:09

Mister Verleg