In this lesson, we will mainly learn about the modal box plug-in in Bootstrap, which is a very common pop-up function plug-in for interactive websites.
For more information about Bootstrap modal box plug-in, please click on the special topic "Bootstrap Modal Usage Tutorial" to learn. I hope you like it, so continue below
one. Basic use
Pop-up components using modal boxes require three layers of div container elements, namely modal (modal declaration layer),
dialog (window declaration layer), content (content layer). In the content layer, there are three layers, namely header, body, and footer.
//Basic Example
<!-- Modal declaration, show indicates display --><div tabindex="-1"> <!-- Window declaration--> <div> <!-- Content declaration--> <div> <!-- Header--> <div> <button type="button" data-dismiss="modal"> <span>×</span> </button> <h4>Member login</h4> </div> <!-- Subject--> <div> <p> Member cannot log in to the member temporarily</p> </div> <!-- Footnote--> <div> <button type="button"> Register</button> <button type="button"> Log in</button> </div> </div> </div> </div> </div> </div> </div> </div>
If you want the modal box to be automatically hidden and then pop up by clicking the button, you need to do the following operations.
//Remove the show in the modal box and add an id<div id="myModal">//Click to trigger the modal box to display <button data-toggle="modal" data-target="#myModal"> Click pop-up window</button>//There are three sizes of pop-up windows, which are normal by default, and there are lg (large) and sm (small)<div><div>//The fading effect can be set<div id="myModal">//Use fluid in the grid system in the main body part<!-- Main body--><div> <div> <div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> </div> </div> </div> </div> </div> </div> </div> </div>
two. Usage instructions
After the introduction of basic usage, let’s take a look at the various important uses of the plug-in. All plug-ins are based on JavaScript/jQuery. Then, there are four elements: usage, parameters, methods and events.
1. Usage
The first type: can be passed through the data attribute
//data-toggledata-toggle="modal" data-target="#myModal"
data-toggle indicates the trigger type
data-target indicates the triggered node
If you are not using <button>, but <a>, where data-target can also use href="#myModal"
replace. Of course, we recommend using data-target. In addition to the two declared attributes, data-toggle and data-target, there are some options available.
2. Parameters
Effects can be controlled by setting the data-* attribute declaration on the HTML element.
//White background and click not to close data-backdrop="false"//Press esc to not close data-keyboard="false"//Initialize hidden. If the button click is triggered, the first click will not be displayed, and the second time it is displayed. data-show="false"//Load index.html once into the container href="index.html"
Of course, it can also be set directly in JavaScript.
//Declare $('#myModal') through jQuery.modal({ show : true, backdrop : false, keyboard : false, remote : 'index.html',});3. Method
If pop-up windows are not displayed by default, how can I click on pop-up windows before and after?
//Click to display pop-up window $('#btn').on('click', function() { $('#myModal').modal('show');});4. Events
The modal box supports 4 types of time, corresponding to before pop-up, after pop-up, before closing and after closing.
$('#myModal').on('show.bs.modal', function() { alert('Free immediately when the show method is called!');});$('#myModal').on('shown.bs.modal', function() { alert('Free immediately when the modal box is displayed!');});$('#myModal').on('hide.bs.modal', function() { alert('Free immediately when the hide method is called!');});$('#myModal').on('hiden.bs.modal', function() { alert('Free after the modal box is displayed!');});$('#myModal').on('loaded.bs.modal', function() { alert('Free after the remote data is loaded!');});This series of tutorials has been compiled into: Bootstrap Basic Tutorials Special Topics, welcome to click to learn.
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all about this article, I hope it will be helpful to everyone's learning.