Open multiple modal dialogs within the same page using Twitter Bootstrap

Question

I want to open some dialogs using Twitter Bootstrap 3.

How can i do this? Can this be done at all?

Answer 1

First create some modalities that you want, like this.

<!-- 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-hidden="true">&times;</button> <h4 class="modal-title">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><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 

Then from your dynamic link switch to your modal using id to bind href. Otherwise, use the onclick javascript event.

 <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a> 

Or (the following option is better for you)

 <a href="javascript:void(null);" class="btn btn-primary btn-lg" onclick="launch_modal('your_id');">Launch Modal</a> 

And from javascript,

 <script> function launch_modal(id) { // Hide all modals using class if required. $('.modal').modal('hide'); $('#'+id).modal('show'); } </script> 

Answer 2

another way is to have this one html:

 <div class="modal fade" id="modal" 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-hidden="true" title="Close">&times;</button> <h4 class="modal-title"></h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 

And a lot of jquery to add content:

 $('#modal .modal-header .modal-title').html('<strong>:)</strong> Success!'); $('#modal .modal-body').html('<p>Something success!.</p>'); $('#modal .modal-footer').html('<button type="button" class="btn btn-default" data-dismiss="modal" title="Close">Close</button>'); $('#modal').modal('show');