Bootstrap ポップアップ window_javascript スキルの実装方法を徹底分析

1. 構造解析

Bootstrap フレームワークのモーダル ポップアップ ボックスはそれぞれ「modal」、「modal-dialog」、「modal-content」スタイルを使用し、ポップアップ ウィンドウの実際のコンテンツは「modal-content」に配置されます。そのメインには次の 3 つの部分も含まれています:

☑ 一般に「modal-header」で表されるポップアップボックスのヘッダーには、主にタイトルと閉じるボタンが含まれます

☑ ポップアップ ボックスの本体。通常は「modal-body」で表され、ポップアップ ボックスのメイン コンテンツです。

☑ ポップアップボックスのフット部分は通常「modal-footer」で表され、主に操作ボタンが配置されます

<div class="modal" id="mymodal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title">模态弹出窗标题</h4>
 </div>
 <div class="modal-body">
 <p>模态弹出窗主体内容</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">保存</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

2. データ切り替えクラスはポップアップ ウィンドウをトリガーします (JS を記述する必要はありません)

1. モーダル ポップアップ ウィンドウ宣言 。カスタマイズする必要があるのは、data-toggle と data-target の 2 つの属性のみです。

<!-- data-target触发模态弹出窗元素 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>
<!-- 模态弹出窗内容 -->
<div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title">模态弹出窗标题</h4>
 </div>
 <div class="modal-body">
 <p>模态弹出窗主体内容</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">保存</button>
 </div>
 </div>
 </div>
</div>

2. データパラメータの説明

データトグルとデータターゲットによるモーダル ポップアップ ウィンドウの制御に加えて、ブートストラップ フレームワークは、モーダル ポップアップ ウィンドウを制御するためのモーダル ポップアップ ボックス用の他のカスタム データ属性も提供します。

3. JSトリガーポップアップウィンドウ(JSの記述が必要)

1. カスタム属性を使用してモーダル ポップアップ ボックスをトリガーすることに加えて、JavaScript メソッドを通じてモーダル ポップアップ ウィンドウをトリガーすることもできます。要素にイベントを与えることでトリガーされます。たとえば、ボタンにクリック イベントを与えて、モーダル ポップアップ ウィンドウをトリガーします。

HTML:

点击我
<div class="modal" id="mymodal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title">模态弹出窗标题</h4>
 </div>
 <div class="modal-body">
 <p>模态弹出窗主体内容</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">保存</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JS:

 $(function(){
 $(".btn").click(function(){
 $("#mymodal").modal("toggle");
 });
 });

2. JavaScript を使用してモーダル ポップアップ ウィンドウをトリガーする場合、Bootstrap フレームワークは主に

を含むいくつかの設定を提供します。

プロパティ設定:

$(function(){
 $(".btn").click(function(){
 $("#mymodal").modal({
  keyboard:false
 });
 });
});

パラメータ設定:

イベント設定:

$('#myModal').on('hidden.bs.modal', function (e) {
 // 处理代码...
})

4. ポップアップウィンドウのサイズ

Bootstrap フレームワークでは、モーダル ポップアップのさまざまなサイズも提供されます。

1 つは、大きいサイズのスタイル

「modal-lg」です。

<divclass="modal-dialog modal-lg">
 <divclass="modal-content"> ... </div>
</div>

もう 1 つは、小さいサイズのスタイル「

modal-sm」です。

<divclass="modal-dialog modal-sm">
 <divclass="modal-content"> ... </div>
</div>

以上はBootstrapポップアップウィンドウの実装方法の完全な紹介であり、皆様の学習に役立つことを願っています。