模態框嵌套
在開發中,遇到需要通過點擊事件觸發第一個模態框,觸發後通過事件喚起第二個模態框,並且通過事件觸發第三個模態框;即模態框嵌套。
模態框嵌套需要用一個模態框包裹所涉及嵌套的模態框,從而點擊觸發模態框不會亂掉。
HTML代碼如下:
<!--最外層包裹的模態框--><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
模態框中tabindex屬性w3c的解釋是:tabindex 屬性規定元素的 tab 鍵控制次序(當 tab 鍵用於導航時)。幾乎所有瀏覽器均 tabindex 屬性,除了 Safari。
在模態框嵌套中,當該屬性存在時不論值等於多少,鍵盤上的返回鍵(Esc)都能起作用;而不存在時返回鍵(Esc)不起作用。
去除模態框內建的陰影
當觸發模態框時會產生一個陰影層覆蓋整個頁面。
該 陰影層是由一個類名叫 .modal-backdrop 控制顯示。
.modal-backdrop 在bootsrap源碼的樣式如下:
.modal-backdrop.fade { filter: alpha(opacity=0); opacity: 0;}.modal-backdrop.in { filter: alpha(opacity=50); opacity: .5;}
當需要去除陰影層時可以為其設定css樣式
1 .modal-backdrop {2 filter: alpha(opacity=0)!important;3 opacity: 0!important;4 }
或者通過js控制
1 $(".modal-backdrop").remove();