Bootstrap modal box nesting, tabindex attribute, method of removing shadow

Modal box nesting

During development, it is necessary to trigger the first modal box through a click event, and then call up the third modal box through the event after triggering. Two modal boxes, and trigger the third modal box through events; that is, nested modal boxes.

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:

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

tabindex

The explanation of tabindex attribute w3c in the modal box is: The tabindex attribute specifies the tab order of an element (when the tab key is used for navigation). 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 overlay will be generated the entire page.

#The shadow layer is composed of a class named .modal-backdrop Control display.

.modal-backdrop The style 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 css for it Style

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

or control through js

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

The above is the detailed content of Bootstrap modal box nesting, tabindex attribute, method of removing shadow. For more information, please follow other related articles on the PHP Chinese website!