How To Create Modals Using Bootstrap

[easy-social-share counters=0 style="button"]

Modals are simply a dialog box that is used to provide important information to the user and early user to take on necessity actions before moving on.

Modal windows are commonly used to warn users for conditions just like session some time out and to receive their final approval before going to execute any kind of very important actions just like saving or simply deleting really important data files.

It is easy to set up very brilliant and also flexible dialog boxes with the Bootstrap modal plugin.

The following as an example will explain how you can set up a very simple modal with a header, message body or the footer containing action keys for the end user.

— The above as an example launches the modal particular window when ever the DOM is fully loaded using JavaScript. The output can look something similar to this:

twitter-bootstrap-modal

Activate Modals with Data Attributes

You can actually activate a Bootstrap modal by clicking on the key and url with data files attributes without writing and submitting any kind of JavaScript code. Notice the following as an example:

The above example launches the modal window on click on of the “Launch Trial Modal” key. Let’s go through each and every section of this modal code 1 by 1 for a much better understanding.

Explanation of Code

To activate a Bootstrap modal with data files attributes we simply require two elements — the controller component just like a key and url, so the modal component by itself.

The outermost container of each and every modal in a document should have an amazing id (for that reason id=”myModal”), so as that this can be highly targeted with data-target (for keys) and href (for links) attribute of the controller component.

The attribute data-toggle=”modal” is needed to separately attached the controller component, just like a key and an anchor, and also an attribute data-target=”#myModal” and href=”#myModal” to target a particular modal to toggle.

The .modal-dialog class sets the width as well as horizontal and also vertical alignment of the modal box. Whereas the class .modal-content sets the styles just like text and also background color, borders, rounded corners and etc.

Take a rest of the thing is easy to see, just like the .modal-header component defines a header for the modal that usually contains a modal title or a close key, whereas the .modal-body component contains the actual articles just like text, images, forms and etc. or the .modal-footer component defines the footer that generally contains action keys for the end user.

Notice:The .fade class on the .modal component adds on a fading and also sliding animation impact while displaying and also hiding the modal window . If you would like the modal that basically appear without the effect you can actually just simply remove this class.

Activate Modals with JavaScript

You can also activate a Bootstrap modal window with JavaScript — just simply call the modal() Bootstrap technique with the modal “id” and “class” selector in your own JavaScript code.

Changing the Sizes of Modals

Bootstrap gives choice further to scaling a modal up and down. You can also make modals large and small by adding some other class .modal-lg and .modal-sm on .modal-dialog.

Changing Modal Content Based on Trigger Button

Often modal on a web page has almost similar content with minor main difference.

You can make use of the modal events to set up significantly completely different modal windows based upon the similar modal HTML.

The following as an example can change the title of the modal window in accordance with the trigger button’s data-title attribute value.

<!DOCTYPE html>

<html lang="en">

<head>

<title>Example of Bootstrap 3 Modal Events</title>

<link rel="stylesheet" href="http://ctrlq.net/codituts/css/bootstrap.min.css">

<link rel="stylesheet" href="http://ctrlq.net/codituts/css/bootstrap-theme.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://ctrlq.net/codituts/js/bootstrap.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#myModal").on('show.bs.modal', function(event){

var button = $(event.relatedTarget);  // Button that triggered the modal

var titleData = button.data('title'); // Extract value from data-* attributes

$(this).find('.modal-title').text(titleData + ' Form');

});

});

</script>

<style type="text/css">

.bs-example{

margin: 20px;

}

</style>

</head>

<body>

<div class="bs-example">

<!-- Button HTML (to Trigger Modal) -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-title="Feedback">Feedback</button>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-title="Report Error">Report Error</button>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-title="Contact Us">Contact Us</button>



<!-- Modal HTML -->

<div id="myModal" class="modal fade">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

<h4 class="modal-title">Modal Window</h4>

</div>

<div class="modal-body">

<form role="form">

<div class="form-group">

<label for="recipient-name" class="control-label">Email:</label>

<input type="text" class="form-control" id="recipient-name">

</div>

<div class="form-group">

<label for="message-text" class="control-label">Message:</label>

<textarea class="form-control" id="message-text"></textarea>

</div>

</form>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

<button type="button" class="btn btn-primary">Send</button>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Options

There are specific choices which can be passed on to modal () Bootstrap way to customize the functionality of a modal window.

NameTypeDefault ValueDescription
backdropboolean
or the string’static’
trueIncludes a modal-backdrop (black overlay area) element. Alternatively, you may specify static for a backdrop which doesn’t close the modal on click.
keyboardbooleantrueCloses the modal window on press of escape key.
showbooleantrueShows the modal when initialized or activate.
remoteURLfalseDeprecated If a remote url is provided, content will be loaded one time via jQuery’s load method and injected into the ‘.modal-content’ div.

Maybe you will set up these kinds of choices either by making use of data files attributes and JavaScript. For setting the modals choices with data files attributes , just simply append the choice name to data-, just like data-backdrop=”static” , data-keyboard=”false” and etc.
On the other hand, JavaScript is the a lot more more effective method for setting all these choices like it prevents you from repetitive work . Notice the modal’s technique .modal (choices) in the part below to understand how to set up the choices for modals making use of the JavaScript.
In case you can be making use of the data files api for setting the choices for modal window, you might alternatively make use of the “href” attribute to provide the Web url of remote source, like that:

Notice:The remote choice for the Bootstrap modals is deprecated since v3.3.0 and will be removed in v4. Make use of the client-side tinplating and a data files binding framework instead, and call the jQuery. load technique your self.

Methods

However these are the standard bootstrap’s modals techniques:

.modal(options)

Using this method activates the articles just as a modal. This also permits you to set choices for all of them.
The jQuery code in the following as an example can prevent the modal from closing when ever a user clicks on on the backdrop i.e. black overlay location behind the modal.

The following jQuery code can prevent the modal from closing on press of the escape key.

The jQuery code the following for example will set up a modal by which articles of the modal will likely be inserted from a remote data file upon activation.

 

.modal(‘toggle’)

Using this method toggles a modal window personally.

.modal(‘show’)

Using this method is useful to open up a modal window personally.

.modal(‘hide’)

Using this method can be of help to hide a modal window personally.

modal(‘handleUpdate’)

Using this method readjusts the modal’s position to counter the jerk that can be occurring due to the appearance of the viewport scrollbar in case if the modal height changes in such some way that it would be larger than the viewport height while it is open up.
A very common example of this situation is displaying the hidden components inside the modal with JavaScript and loading articles inside the modal making use of Ajax after activation.

Events

Bootstrap’s modal class includes couple of events for hooking into modal functionality.

EventDescription
show.bs.modalThis event fires immediately when the show instance method is called.
shown.bs.modalThis event is fired when the modal has been made visible to the user. It will wait until the CSS transition process has been fully completed before getting fired.
hide.bs.modalThis event is fired immediately when the hide instance method has been called.
hidden.bs.modalThis event is fired when the modal has finished being hidden from the user. It will wait until the CSS transition process has been fully completed before getting fired.
loaded.bs.modalThis event is fired when the modal has loaded content using the remoteoption.

The following for example shows an alert message to the user when ever fade out out transition of the modal window has become totally complete.

Hope you all like this Tuts byCodiTuts.com, if yes then keep us supporting by sharing this post, Cheerful Coding smiley.

Submit a comment

Pin It on Pinterest