使用jQuery和Bootstrap實現多層、自適應模態視窗_jquery

本篇實踐一個多層模態窗口，而且是自適應的。

點擊頁面上的一個按鈕，彈出第一層自適應模態視窗。

在第一層模態窗口內包含一個按鈕，點擊該按鈕彈出第二層模態窗口，彈出的第二層模態窗口會擋住第一層模態窗口，即第二層模態窗口開啟的時候，無法關閉第一層模態視窗。

具體頁面實作部分如下：

複製程式碼 程式碼如下: .modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom { margin-right: 0; } .modal { bottom: auto; padding: 0; background-color: #ffffff; border: 1px solid #999999; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); background-clip: padding-box; overflow-y: auto; } .modal.container { max-width: none; } #firstmodal { width: 98%; height: 98%; } #secondmodal { width: 99%; height: 99%; } $(function() { $('#m1').on("click", function() { $('#firstmodal').modal(); }); $('#m2').on("click", function () { $('#secondmodal').modal(); }); }); 打开第一层模态窗口 × 第一层模态窗口 開啟第二層模態視窗 第一層主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容 內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體 內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體 內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體 Sharp Sharp Sharp Sharp Sharp 主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容 Sharp 第一層主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容 內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體 內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體 內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體 Sharp Sharp Sharp Sharp 主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 第一层主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

关闭 × 第二层模态窗口

主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容 內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體 內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體

關閉

使用jQuery和Bootstrap實現多層、自適應模態視窗_jquery

第一层模态窗口

第二层模态窗口

相關文章