Bootstrap Modal Plugin

The Modal is a child window that is overlaid on top of the parent window. Typically, the purpose is to display content from a separate source that can include some interaction without leaving the parent window. The child window can provide information, interaction, etc.

modal.js. Alternatively, as mentioned in the Bootstrap Plugin Overview chapter, you can include bootstrap.js or the compressed bootstrap.min.js.

Usage

You can toggle the hidden content of the Modal plugin:

• Through data attributes: Set the attribute data-toggle="modal" on the controller element (such as a button or link), and set data-target="#identifier" or href="#identifier" to specify the particular modal to toggle (with id="identifier").

• Through JavaScript: With this technique, you can call the modal with id="identifier" using a single line of JavaScript:

  $('#identifier').modal(options)
  

Example

A static modal window example, as shown in the following example:

Example

<h2>Creating a Modal</h2>
<!-- Button to trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Start 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">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 -->
</div>

The result is as follows:

Code Explanation:

• To use the modal window, you need some kind of trigger. You can use a button or a link. Here, we use a button.

• If you look closely at the code above, you'll notice in the <button> tag, data-target="#myModal" is the target of the modal you want to load on the page. You can create multiple modals on a page and then create different triggers for each modal. Obviously, you cannot load multiple modals at the same time, but you can create multiple modals that load at different times.

• Two things to note in the modal:

• The first is .modal, which identifies the <div>'s content as a modal.

• The second is the .fade class. It causes the content to fade in and out when the modal is toggled.

• aria-labelledby="myModalLabel", this attribute references the modal's title.

• The attribute aria-hidden="true" is used to keep the modal window invisible until the trigger is activated (such as clicking the related button).

• <div class="modal-header">, the modal-header class is used to style the header of the modal window. -class="close" is a CSS class used to style the close button of a modal window.

-data-dismiss="modal" is a custom HTML5 data attribute used to close the modal window.

-class="modal-body" is a CSS class from Bootstrap CSS used to style the body of the modal window.

-class="modal-footer" is a CSS class from Bootstrap CSS used to style the footer of the modal window.

-data-toggle="modal" is a custom HTML5 data attribute used to open the modal window.

Options

Some options can be used to customize the appearance and behavior of the modal window (Modal Window), which are passed through data attributes or JavaScript. The following table lists these options:

Methods

Here are some useful methods that can be used with modal().

Example

The following example demonstrates the usage of methods:

Example

<!-- 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">Modal Title</h4>
            </div>
            <div class="modal-body">Press the ESC key to exit.</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
```html
<button type="button" class="btn btn-primary">Submit Changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->

The result is as follows:

Simply press the ESC key, and the modal window will exit.

Events

The table below lists the events to be used in the modal. These events can be used as hooks in functions.

Example

The following example demonstrates the usage of events:

Example

<!-- Modal -->
<h2>Modal Plugin Events</h2>
<!-- Button to trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Start 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">Modal Title</h4>
            </div>
            <div class="modal-body">Click the close button to check the 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>

The result is as follows:

As shown in the example above, if you click the Close button, which is the hide event, an alert message will be displayed.