bootstrap模態框嵌套、tabindex屬性、去除陰影的方法

來源:互聯網
上載者:User
模態框嵌套

在開發中,遇到需要通過點擊事件觸發第一個模態框,觸發後通過事件喚起第二個模態框,並且通過事件觸發第三個模態框;即模態框嵌套。

模態框嵌套需要用一個模態框包裹所涉及嵌套的模態框,從而點擊觸發模態框不會亂掉。

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();
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.