Front end Bootstrap Modal box plug-in

Posted by rpanning on Sat, 01 Feb 2020 14:08:37 +0100

A Modal box is a child form that is overlaid on the parent form. In general, the purpose is to display content from a single source, with some interaction without leaving the parent form. Subform can provide information, interaction, etc. Before use, you need to refer to bootstrap.js or the compressed version of bootstrap.min.js.

If you want to refer to the plug-in's functions separately, you need to refer to modal.js. See in detail https://www.runoob.com/bootstrap/bootstrap-plugins-overview.html

Usage:

Toggle the hidden content of the Modal plug-in:

Through the data attribute: set the attribute data toggle = "module" on the controller element (such as button or link), and set the data target = "

JavaScript: with this technology, you can call the modal box with id="identifier" through a simple line of JavaScript:

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

Example: a static modal window instance, as shown in the following example:

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap Example - Modal frame ( Modal)Plug-in unit</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <h2>Create a modal box( Modal)</h2>
        <!--      Button trigger mode box      -->
        <button class="btn      btn-primary      btn-lg" data-toggle="modal" data-target="#myModal">
            Start demo mode box
        </button>
        <!--      Modal frame ( 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 frame ( 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>
    </body>
    </html>

Code explanation:

With modal windows, you need to have some kind of trigger. You can use buttons or links. Here we use buttons.
From the above code, you will find that in the < button > tab, data target = "ාාාාාmymodal" is the target of the modal box you want to load on the page. You can create multiple modal boxes on the page, and then create different triggers for each modal box. Now, obviously, you can't load multiple modules at the same time, but you can create multiple modules on the page to load at different times.
Two points need to be noted in the modal box:

The first is. Modal, which is used to identify the content of < div > as a modal box.
The second is. fade class. When a modal box is switched, it causes content to fade in and out.

Aria labelledby = "mymodal label", which refers to the title of the modal box.
The attribute aria hidden = "true" is used to keep the modal window invisible until the trigger is triggered (such as clicking on the relevant button).
< div class = "modal header" >.
class="close", close is a CSS class used to style the close button of the modal window.
Data dispersion = "modal", is a custom HTML 5 data attribute. Here it is used to close the modal window.
Class = "modal body", a CSS class of Bootstrap CSS, is used to style the body of modal window.
Class = "modal footer", a CSS class of Bootstrap CSS, is used to style the bottom of the modal window.
Data toggle = "modal", the data attribute data toggle customized by HTML5 is used to open the modal window.

Options:

There are options for customizing the look and feel of modal windows, which are passed through data properties or JavaScript. The following table lists these options:

Option name	Type / default	Data property name	describe
backdrop	boolean or string 'static' Default value: true	data-backdrop	Specifies a static background that does not close the modal box when the user clicks outside.
keyboard	boolean Default value: true	data-keyboard	When the escape key is pressed, the mode box is closed, and when it is set to false, the key is invalid.
show	boolean Default value: true	data-show	The modal box is displayed when initializing.
remote	path Default: false	data-remote	Use the jQuery. load method to inject content into the body of the modal box. If you add an href with a valid URL, the content is loaded. As shown in the following example: Please click on me</a>

Methods: here are some useful methods to use with modal().

Method	describe	Example
Options: .modal(options)	Activate the content as a modal box. Accepts an optional option object.	$('#identifier').modal({keyboard: false})
Toggle: .modal('toggle')	Manually switch the modal box.	$('#identifier').modal('toggle')
Show: .modal('show')	Open the modal box manually.	$('#identifier').modal('show')
Hide: .modal('hide')	Hide the modal box manually.	$('#identifier').modal('hide')

Example: just click ESC and the modal window will exit.

    <!--      Example 2      -->
    <!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8">
        <title>Bootstrap Example - Modal frame ( Modal)Plug-in method</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>

    <body>

        <h2>Modal frame ( Modal)Plug-in method</h2>
        <!--      Button trigger mode box      -->
        <button class="btn      btn-primary      btn-lg" data-toggle="modal" data-target="#myModal">
            Start demo mode box
        </button>
        <!--      Modal frame ( 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 frame ( Modal)Title
                        </h4>
                    </div>
                    <div class="modal-body">
                        Press down 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      -->

    </body>

    </html>

Event:

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

Event	describe	Example
show.bs.modal	Triggered after a call to the show method.	$('#identifier').on('show.bs.modal', function () { / / perform some actions })
shown.bs.modal	Triggered when the modal box is visible to the user (will wait for the CSS transition effect to complete).	$('#identifier').on('shown.bs.modal', function () { / / perform some actions })
hide.bs.modal	Triggered when the hide instance method is called.	$('#identifier').on('hide.bs.modal', function () { / / perform some actions })
hidden.bs.modal	Triggered when the modal box is completely hidden from the user.	$('#identifier').on('hidden.bs.modal', function () { / / perform some actions })

bellediao

32 original articles published, 53 praised, 50000 visitors+

Private letter follow

Topics: Attribute JQuery Javascript Windows

Programmer Think

Front end Bootstrap Modal box plug-in

Event:

Hot Topics