bootstrap のモーダルボックス
モーダルボックス機能だけを使いたい場合は、bootstrap に modal.js を別途導入し、bootstrap の CSS を導入することも可能ですパッケージでは、bootstrap.jsを導入できます。
使用方法
data 属性を介して (ボタンの data-toggle='"modal" の設定やデータの設定など) -target= "#myModal" セレクターの内容、
コード $('#myModal').modal(options)
を直接使用します。 js経由でモデル化 モーダルボックスは主にmodel-head、modal-body、model-footerの3つの部分で構成されており、主要な内容はbodyに表示されます。Class="close"は閉じたモーダルボックススタイルです。
-
一般的に使用されるいくつかのメソッド$('#identifier').modal('toggle') はモーダル ボックスの状態を切り替えます
$('#identifier').modal ('show') モーダル ボックスを表示
$('#identifier').modal('hide') モーダル ボックスを非表示
Function | Usage | |
---|---|---|
In を呼び出した後にトリガーされます。メソッドを表示します。 | $('#myModal').on('show.bs.modal',function () {alert("モーダル ボックスを表示");}); | |
show メソッドを呼び出した後にトリガーされます。 | $('#myModal').on('shown.bs.modal', function () {alert("モーダルを完全に表示"); }); | hide.bs.modal |
$('#myModal').on('hide.bs.modal', function () {alert("モーダルボックスを隠す");}); | hidden.bs.modal | |
$('#myModal').on('hidden.bs.modal', function () {alert("モーダルボックスを完全に非表示にします"); }); |
1.次の 3 つのファイルを順番に導入します
<link rel="stylesheet" href="../css/bootstrap.min.css"> <script sype="text/JavaScript" src="./jquery.min.js"></script> <script sype="text/JavaScript" src="../js/bootstrap.min.js"></script>
2. 以下をページにコピーします。コード
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title text-center" id="myModalLabel">标题是什么</h4> </div> <div class="modal-body"> 写你HTML文本 </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 --> </div>
は簡単です。モーダル ボックスにはトリガーが必要です。モーダル ボックスをトリガーする次の属性を HTML 要素に追加します。
data-toggle="modal" data-target="#myModal"以下を観察すると、この data-target="#myModal"
の myModal がモーダル ボックスが配置されている div の ID であることがわかります
(推奨: "
bootstrap チュートリアル