亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

模態(tài)框嵌套

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

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

HTML代碼如下：

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

tabindex

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

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

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

當(dāng)觸發(fā)模態(tài)框時(shí)會(huì)產(chǎn)生一個(gè)陰影層覆蓋整個(gè)頁(yè)面。

該 陰影層是由一個(gè)類(lèi)名叫 .modal-backdrop 控制顯示。

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

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

當(dāng)需要去除陰影層時(shí)可以為其設(shè)置css樣式

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

或者通過(guò)js控制

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

總結(jié)

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

相關(guān)文章

最新評(píng)論