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)框時會產生一個陰影層覆蓋整個頁面。
該 陰影層是由一個類名叫 .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();
總結
以上所述是小編給大家介紹的bootstrap模態(tài)框嵌套、tabindex屬性、去除陰影的示例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要給大家介紹了關于js實用技巧之去除數組或者對象里重復選項的相關資料,JavaScript數組有很多內置方法,可以操作和處理數據,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-08-08
基于javascript代碼檢測訪問網頁的瀏覽器呈現引擎、平臺、Windows操作系統(tǒng)、移動設備和游戲系統(tǒng)
這篇文章主要介紹了基于javascript代碼檢測訪問網頁的瀏覽器呈現引擎、平臺、Windows操作系統(tǒng)、移動設備和游戲系統(tǒng) 的相關資料,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了js獲取html代碼中圖片地址的實現代碼,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了純javascript版日歷控件，引用calendar.js文件，再把input的id設置成calendar,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了使用JavaScript實現旋轉的彩圈特效的相關資料,需要的朋友可以參考下2015-06-06
這篇文章主要教大家如何使用Bootstrap自定義文件上傳下載樣式，感興趣的小伙伴們可以參考一下2016-05-05
設置文本框中焦點的位置的實現代碼2009-11-11
ZeroClipboard 是國外大神開發(fā)的一個用于剪貼板復制的 JS 插件，它是基于 Flash 來實現跨瀏覽器的復制功能的。當我們使用 ZeroClipboard 的時候，它會悄悄隱藏一個小小的 Flash 影片(swf)，不會對我們的用戶界面造成影響。我們只需要借助它實現復制功能就行了。2016-03-03
餅圖主要是通過扇形的弧度表現不同類目的數據在總和中的占比,它的數據格式比柱狀圖更簡單,這篇文章主要給大家介紹了關于Echarts餅圖樣式之添加內圈陰影達到立體效果的相關資料,文中還介紹了echarts餅圖外部陰影設置的方法,需要的朋友可以參考下2024-02-02
對字符串進行HTML編碼和解碼的JS函數，記下了方便以后找 :)2010-02-02