Bootstrap model dialog cheat sheet

Bootstrap model dialog cheat sheet

Added by Nasir Mahmood updated on Friday, November 17, 2017

Problem:

Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

This tutorial is reserved for Bootstrap Model Dialog.

Model Dialog Creation:

Following is html code for basic model having header and body.


 <div id="gdialog" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
				</button>
                <h4 class="modal-title">Title Goes here</h4>
            </div>
            <div class="modal-body">
                <p>Body</p>
            </div>
        </div>
    </div>
</div>
				

Loading Ajax Contents:

$('#gdialog .modal-body').load('url to get data', function (result) {
    $('#gdialog').modal({ show: true });                    
});
			

Show Model:

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

Show Model Using data attributes:

<button type="button" data-toggle="modal" data-target="#gdialog">Show modal</button>			
			

In above code data-toggle="modal" is use to toggle state of model dialog while data-target="#gdialog" tells which model dialog use.

Close Model:

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

Toggle Model:

Manually toggles a modal.

$('#gdialog').modal('toggle')			
			

Change Title of Model:

$('#gdialog .modal-title').text('New Title');
			

Remove animation:

For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.

show.bs.modal Event:

This event fires immediately when the show instance method is called.

$('#gdialog').on('show.bs.modal', function (e) {
  // do something...
})			
			
			

shown.bs.modal Event:

This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).

$('#gdialog').on('shown.bs.modal', function (e) {
  // do something...
})			
			

hide.bs.modal Event:

This event is fired immediately when the hide instance method has been called.

$('#gdialog').on('hide.bs.modal', function (e) {
  // do something...
})			
			

hidden.bs.modal Event:

This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

$('#gdialog').on('hidden.bs.modal', function (e) {
  // do something...
})			
			

loaded.bs.modal Event:

This event is fired when the modal has loaded content using the remote option.

$('#gdialog').on('loaded.bs.modal', function (e) {
  // do something...
})
			

About

29 Tutorials
25 Snippets
6 Products

More

Contact Us

Contact us

Stay Connected