We now have a youtube channel. Subscribe!

Bootstrap | Modal Plugin

Bootstrap | Modal Plugin


Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this section of our tutorial, we will be discussing about the Bootstrap Modal Plugin.

A modal is a child window layered over its parent window. Typically, the purpose is to display content from a separate source that can have some interaction without leaving the parent window. Child windows provides information, interaction, or more.

If you want to add this bootstrap plugin functionality individually, you will need modal.js. Otherwise, as mentioned in the tutorial Bootstrap Plugins Overview, you can include bootstrap.js or the manified bootstrap.min.js.

Usage

You can toggle the modal plugin's hidden content -

  • Via data attributes - Set the attribute data-toggle = "modal" on a controller element, such as button or link, along with a data-target = "#identifier" or a href = "#identifier" to target a specific modal (with id = "identifier" ) to toggle.
  • Via JavaScript - Making use of this technique you can call a modal with the id = "identifier" with a single line of JavaScript -
$('#identifier').modal(options)

Example

A static modal window example is shown in the following example below -

<h2>Example of creating Modals with Twitter Bootstrap</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- 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" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Add some text here
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
  
</div><!-- /.modal -->

Output

When the above example is executed, it will produce the following result -



Details of the preceding code -

  • To invoke the Modal Window, you need to have some kind of a trigger. You can use a button or a link. Here we have made use of a button.
  • If you look in the above code, you will see that in the <button> tag, the data-target = "#myModal" is the target of the modal that you intend loading on the page. This code lets you to create multiple modals on the page and then have unlike triggers for each of them. Now, to be very clear, you do not load multiple modals at the same time, but you can create many on the pages to be loaded at different times.
  • There are two classes to take note of in the modal -
    • The first is .modal class, which is simply identifying the content of the <div> as a modal.
    • The second is .fade class. When the modal is toggled, this makes the content to fade in and out.
  • aria-labelledby = "myModalLabel", attribute reference the modal title.
  • The attribute aria-hidden = "true" is used for keeping the Modal Window invisible till a trigger comes (such as a click on the button associated).
  • <div class = "modal-header">, modal-header is the class to define style for the header of the modal window.
  • class = "close", is a CSS class that is used to set style for the Close button of the modal window.
  • data-dismiss = "modal", is a custom HTML5 data attribute. Here it is used to close the modal window.
  • class = "modal-body", is a CSS class of Bootstrap CSS used to set the style for body of the modal window.
  • class = "modal-footer", is a CSS class of Bootstrap CSS used to set the style for footer of the modal window.
  • data-toggle = "modal", is a HTML5 custom data attribute used to open the modal window.

Options

There are certain options which you can pass using data attributes or JavaScript to customize the look and feel of the modal window. The following table below lists the options -

Option NameType/Default ValueData attribute nameDescription
backdropboolean or the string 'static' Default: truedata-backdropSpecify static for a backdrop, if you don’t want the modal to be closed when the user clicks outside of the modal.
keyboardboolean Default: truedata-keyboardCloses the modal when escape key is pressed; set to false to disable.
showboolean Default: truedata-showShows the modal when initialized.
remotepath Default: falsedata-remote

Using the jQuery .load method, inject content into the modal body. If an href with a valid URL is added, it will load that content. An example of this is shown below −

<a data-toggle = "modal" href = "remote.html" data-target = "#modal">Click me</a>


Methods

Below are some useful methods that can be used with modal() -

MethodDescriptionExample
Options − .modal(options)Activates your content as a modal. Accepts an optional options object.
$('#identifier').modal({
   keyboard: false
})
Toggle − .modal('toggle')Manually toggles a modal.
$('#identifier').modal('toggle')
Show − .modal('show')Manually opens a modal.
$('#identifier').modal('show')
Hide − .modal('hide')Manually hides a modal.
$('#identifier').modal('hide')

Example

Following example demonstrates the usage of methods -

<h2>Example of using methods of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- 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">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Press ESC button to exit.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal({
      keyboard: true
   })});
</script>

Output

When the above example is executed, it will produce the following result -



Events

The following table below lists the events to work with modal. These events may be used to hook into the function -

EventDescriptionExample
show.bs.modalFired after the show method is called.
$('#identifier').on('show.bs.modal', function () {
   // do something…
})
shown.bs.modalFired when the modal has been made visible to the user (will wait for CSS transitions to complete).
$('#identifier').on('shown.bs.modal', function () {
   // do something…
})
hide.bs.modalFired when the hide instance method has been called.
$('#identifier').on('hide.bs.modal', function () {
   // do something…
})
hidden.bs.modalFired when the modal has finished being hidden from the user.
$('#identifier').on('hidden.bs.modal', function () {
   // do something…
})

Example

Following example demonstrates the usage of events -

<h2>Example of using events of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- 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">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Click on close button to check Event functionality.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal('hide')})});
</script>

<script>
   $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('Hey, I heard you like modals...');})
   });
</script>

Output

When the above example is executed, it will produce the following result -



Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Dropdown Plugin.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain