Modals and Alerts of Bootstrap

 Bootstrap Modals

Modals-: JavaScript modal plugin to add dialogs to your site using Bootstrap’s for lightboxes, user notifications, or completely custom content.

 How it works

With Bootstrap’s modal component are getting started and also sure to read the following as our menu options have recently changed-:

 Modals are built with HTML, CSS, and JavaScript. These positioned over everything else in the document and remove scroll from the body so that modal content scrolls instead.

 Click on the modal “backdrop” will automatically close the modal.

 Bootstrap only justification one modal window at a time. Nested modals aren’t supportive as we believe them to be poor user experiences.

 Modals properly use for position: fixed, which can sometimes be a bit particular about its rendering. It is also possible your modal HTML in a top-level position to avoid potential interference from other elements. You’ll eventually run into issues when nesting a .modal within another fixed element

 How HTML5 defined its semantics due to, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript: Syntax-: $(‘#myModal’).on(‘shown.bs.modal’, function () { $(‘#myInput’).trigger(‘focus’) })

 Creating Modals with Bootstrap

It is specially for a dialog box or popup window that is used to provide important information to the user or prompt user to take necessary actions before moving on. Modals are commonly use to warn users for situations like session time out or to receive their final confirmation before going to perform any critical actions such as saving or deleting important data-:

Code

Output:-

 Activate Modals via Data Attributes

You can actuate a Bootstrap modal by clicking on the button or link via data attributes without writing any JavaScript code. Take a look at the following example to see how it works:

Code

Output:-

Launch Demo Modal

Activate Modals via JavaScript

You may also energize a Bootstrap modal window via JavaScript — just call the modal() Bootstrap method with the modal id or class selector in your JavaScript code.

Syntax:-

 Changing the Size of Modals

Bootstrap assign you option further to scaling a modal up or down. You can make a small, large, as well as extra-large modals by adding an extra class .modal-sm, .modal-lg, and .modal-xl class, respectively on the .modal-dialog. Here’s an example:

Extra Large modal:- Add the .modal-xl class on .modal-dialog to create this extra large modal

Code:-

Output:-

Extra Large modal

Large modal:- Add the .modal-lg class on .modal-dialog to create this large modal.

Code:-

Output:-

Large modal

Small modal:- Add the .modal-sm class on .modal-dialog to create this small modal.

Code:-

Output:-

Small modal

 Changing Modal Content Based on Trigger Button

You can also use the modal events to make a slightly different modal windows based on the same modal HTML. The following example will explain you how to change the title of the modal window according to the trigger button’s data-title attribute value.

Syntax:-

 Creating Vertically Centered Modal

Simply add the class .modal-dialog-centered to .modal-dialog element to vertically center the modal. If modal has long summary you can additionally apply the class .modal-dialog-scrollable on .modal-dialog to make the modal body scrollable. Here’s an example:

Code:-

Output:-

Vertically Centered Modal

 Using the Grid inside Modals

You can also utilize the Bootstrap grid system to make grid layouts within a modal. Simply, use the .row class to create rows and use .col-*, .col-sm-*, .col-md-*, .col-lg-* and .col-xl-* classes to create columns within the .modal-body. Let’s check out an example:

Code:-

Output:-

Send Us a Message

×EmailCancelSend Email

 Loading Content in Modal via Ajax

You can also charge remote content inside the Bootstrap modal via Ajax. In the following lesson content inside the modal body will be inserted from a remote file upon activation using the jQuery load() method and Bootstrap show.bs.modal event.

Syntax:-

 Options

There are some options which can be passed to modal() Bootstrap method to customize the functionality of a modal. Choices can be passed via data attributes or JavaScript.

For set the modals options via data attributes, just append the option name to data-, such as data-backdrop=”static”, data-keyboard=”false”, and so on.

Syntax:-

Data attributes provides an easy way for setting the modal options, however JavaScript is the more preferable way as it prevents you from repetitive work.

 Methods

These are the standard bootstrap’s modals methods:-.modal(options)

This method activates the content as a modal. It also permit you to set options for them. The jQuery code in the following example will prevent the modal from closing when a user clicks on the backdrop i.e. black overlay area behind the modal.

Syntax:-

.modal(‘show’)

This method can be use to open a modal window manually.

Syntax:-

.modal(‘toggle’)

This method can be assigned to toggle a modal window manually..

Syntax:-

.modal(‘handleUpdate’)

This method co-operate the modal’s position to counter the jerk that is occurring due to the appearance of the viewport scrollbar in case if the modal height changes in such a way that it becomes higher than the viewport height while it is open.

Syntax:-

 Events

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

Table:-

Syntax:-

 Bootstrap Alerts

Bootstrap provides for alerts .Alerts provides a basic style messages to the user. These confer contextual feedback messages for typical user actions. You can adding an optional closed icon to alert.Used the Alerts For jQuery inline dismissal plugin.

You can link a basic alert by designing a wrapper div and link a class of .alert and one of the most popular four contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger).

Example:-

Success! Well done its submitted.Info! take this info.Warning ! Dont submit this.Error ! Change few things.

 Creating Alert Messages with Bootstrap

Alert boxes are used quite often to stand out the information that needs immediate attention of the end users such as warning, error or confirmation messages.

With Bootstrap you can easily design elegant alert messages box for various purposes. You can also linked an alternate close button to dismiss any alert.

You can make a simple Bootstrap warning alert message box by adding the contextual class .alert-warning to the .alert base class.

Code:-

Output:-

Warning! Please enter a recognized Name in the requisite fields before proceeding.×Note! If you don’t need animation just delete these classes. It used on the .alert element or .alert-dismissible class suitable positioning of the .close button. If your alert doesn’t have a remove button you can skip this class.

Bootstrap 4 provide a total 8 different types of alerts.The most usually used alerts, which are: success, error or danger, warning and info alerts.

Code:-

Output:-

Primary! This is a convenient primary alert box.×Secondary! This is a easy secondary alert box.×Dark! This is a convenient dark alert box.×Light! This is a easy light alert box.×

 Additional Content inside Alerts

You can also place addition on HTML elements like headings, paragraphs and dividers inside an alert. To operate spacing between the elements you can utilize margin utility classes, as here:

 Warning!

Please enter a recognized Name in all the required fields before proceeding. If you enter a invalid name your i’d is blocked


Once you have filled all the details, click on the ‘Next’ button to continue.×

 Matching Links Color inside Alerts

Apply the utility class .alert-link to the links inside any alert boxes to quickly create matching colored links, as shown in the example below:

Code:-

Output:-

Warning! A simple warning alert with an example link

Similarly, you can match links inside other alert boxes, as shown in the following example:

Success! Your message has been sent successfully an example linkError! A problem has been occurred while submitting your data an example linkWarning! There was a issues with your network connection.an example linkInfo! Please read the comments carefully an example link

 Closing Alerts via Data Attribute

Data attributes provides a simple and easy way to add close functionality to the alert boxes. Just link the data-dismiss=”alert” to the close button and it will automatically enable the dismissal of the containing alert message box. Also, add the class .alert-dismissible to the .alert element for proper positioning of the .close button. Here’s an example:

Code:-

Output:-

Note! This is a simple example of dismissible alert.×

 Closing Alerts via JavaScript

You may also enable the dismissal of an alert via JavaScript. <script> $(document).ready(function(){ $(“.close”).click(function(){ $(“#myAlert”).alert(‘close’); }); }); </script>

Code:-

Output:-

×Primary! Indicates an important action.×Secondary! Indicates a slightly less important action.×Dark! Dark grey alert.×Light! Light grey alert.

 Methods

These are the standard bootstrap’s alerts methods:- $().alert()

This method makes an alert listen for click events on descendant elements which have the data-dismiss=”alert” attribute. Not necessary when using the data-api’s auto-initialization.

Syntax:-

<script> $(document).ready(function(){ $(“.alert”).alert(); }); </script>  $().alert(‘close’)

This method closes an alert by removing it from the DOM.

Syntax:-

<script> $(document).ready(function(){ $(“.close”).click(function(){ $(“#myAlert”).alert(‘close’); }); </script>

 Events

Bootstrap’s alert class includes few events for hooking into alert functionality.

Table:-

Syntax:-

<script> $(document).ready(function(){ $(“#myAlert”).on(‘closed.bs.alert’, function(){ alert(“Alert message box has been closed.”); }); }); </script>