欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

bootstrap模態(tài)框嵌套、tabindex屬性、去除陰影的示例代碼

 更新時間：2017年10月17日 16:22:48   作者：xingba-coder  
這篇文章主要介紹了bootstrap模態(tài)框嵌套、tabindex屬性、去除陰影,需要的朋友可以參考下

模態(tài)框嵌套

在開發(fā)中，遇到需要通過點擊事件觸發(fā)第一個模態(tài)框，觸發(fā)后通過事件喚起第二個模態(tài)框，并且通過事件觸發(fā)第三個模態(tài)框；即模態(tài)框嵌套。

模態(tài)框嵌套需要用一個模態(tài)框包裹所涉及嵌套的模態(tài)框，從而點擊觸發(fā)模態(tài)框不會亂掉。

HTML代碼如下：

<!--最外層包裹的模態(tài)框-->
<div class="modal fade" id="outermost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
　　<!--第一個模態(tài)框--> 
　　<div class="modal-dialog modalWith firstModal" id="productModal" role="document"></div> 
　　<!--第二個模態(tài)框--> 
　　<div class="modal" tabindex="-1" role="dialog" id="addproduct" aria-labelledby="myModalLabel"></div> 
　　<!--第三個模態(tài)框--> 
　　<div class="modal" tabindex="-1" role="dialog" id="selectProduct" aria-labelledby="myModalLabel"></div> 
</div>

tabindex

模態(tài)框中tabindex屬性w3c的解釋是：tabindex 屬性規(guī)定元素的 tab 鍵控制次序（當 tab 鍵用于導航時）。幾乎所有瀏覽器均 tabindex 屬性，除了 Safari。

在模態(tài)框嵌套中，當該屬性存在時不論值等于多少，鍵盤上的返回鍵（Esc）都能起作用；而不存在時返回鍵（Esc）不起作用。

去除模態(tài)框自帶的陰影

當觸發(fā)模態(tài)框時會產(chǎn)生一個陰影層覆蓋整個頁面。

該 陰影層是由一個類名叫 .modal-backdrop 控制顯示。

.modal-backdrop 在bootsrap源碼的樣式如下：

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

當需要去除陰影層時可以為其設置css樣式

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

或者通過js控制

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

總結(jié)

以上所述是小編給大家介紹的bootstrap模態(tài)框嵌套、tabindex屬性、去除陰影的示例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論