Detailed explanation of bootstrap modal box nesting and tabindex attributes

This article mainly introduces bootstrap modal box nesting, tabindex attributes, and shadow removal. Friends who need it can refer to it. I hope it can help everyone.

Modal box nesting

During development, it is necessary to trigger the first modal box through a click event. After triggering, the second modal box is evoked through the event, and the event is triggered. Trigger the third modal box; that is, the modal box is nested.

Modal box nesting requires a modal box to wrap the nested modal box involved, so that the modal box will not be messed up when clicked.

HTML code is as follows:

<!--最外层包裹的模态框-->
<p class="modal fade" id="outermost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
　　<!--第一个模态框--> 
　　<p class="modal-dialog modalWith firstModal" id="productModal" role="document"></p> 
　　<!--第二个模态框--> 
　　<p class="modal" tabindex="-1" role="dialog" id="addproduct" aria-labelledby="myModalLabel"></p> 
　　<!--第三个模态框--> 
　　<p class="modal" tabindex="-1" role="dialog" id="selectProduct" aria-labelledby="myModalLabel"></p> 
</p>

tabindex

The explanation of w3c's tabindex attribute in the modal box is: the tabindex attribute specifies the tab key control order of the element (when the tab key is used for while navigating). Almost all browsers have the tabindex attribute except Safari.

In the nested modal box, when the attribute exists, no matter what the value is, the return key (Esc) on the keyboard will work; when it does not exist, the return key (Esc) will not work.

Remove the shadow that comes with the modal box

When the modal box is triggered, a shadow layer will be generated to cover the entire page.

The shadow layer is controlled by a class named .modal-backdrop. The style of

.modal-backdrop in bootsrap source code is as follows:

.modal-backdrop.fade {
 filter: alpha(opacity=0);
 opacity: 0;
}
.modal-backdrop.in {
 filter: alpha(opacity=50);
 opacity: .5;}

When you need to remove the shadow layer, you can set the css style for it

 .modal-backdrop {
 filter: alpha(opacity=0)!important;
 opacity: 0!important;
}

or control it through js

 $(".modal-backdrop").remove();

Related recommendations:

How to solve the problem that the BootStrap modal box is not vertically centered

AJAX and SpringMVC implement paging of the bootstrap modal box Detailed explanation of query function

Perfectly solves the problem that input cannot get focus when BootStrap modal box and select2 are used together

The above is the detailed content of Detailed explanation of bootstrap modal box nesting and tabindex attributes. For more information, please follow other related articles on the PHP Chinese website!