jQuery とブートストラップを使用してマルチレイヤーのアダプティブモーダルを実装する-jsチュートリアル-php.cn

この記事では、多層モーダル ウィンドウを実践します。これは適応型です。

ページ上のボタンをクリックして、アダプティブ モーダル ウィンドウの最初のレイヤーをポップアップします。

最初のレイヤーのモーダル ウィンドウにボタンが含まれています。ボタンをクリックすると、2 番目のレイヤーのモーダル ウィンドウがポップアップされ、最初のレイヤーのモーダル ウィンドウ、つまり 2 番目のレイヤーのモーダル ウィンドウがブロックされます。開いている場合、最初のレイヤーのモーダル ウィンドウを閉じることはできません。

特定のページ実装部分は次のとおりです:

コードをコピー コードは次のとおりです: .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(); }); }); 打开第一层模态窗口 × 第一层模态窗口 ＆lt; button class = "btn btn-primary btn-lg" id = "m2"＆gt; 2番目のレイヤーモーダルウィンドウ＆lt;/button＆gt; を開く メインコンテンツの第 1 層 メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツの第 1 層 メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 第一层主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容 主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容

关闭 × 第二层模态窗口 メインコンテンツの第二層 メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ メインコンテンツ ＆lt; button type = "button" data-dismiss = "modal" class = "btn btn-default"＆gt; close＆lt;/button＆gt;

上記は、マルチレイヤーおよびアダプティブモーダルウィンドウを実装するための jQuery と Bootstrap の内容全体です。これは非常に優れており実用的であり、プロジェクトで直接使用できます。

jQuery とブートストラップを使用してマルチレイヤーのアダプティブ モーダルを実装する

第一层模态窗口

第二层模态窗口

jQuery とブートストラップを使用してマルチレイヤーのアダプティブモーダルを実装する