BootStrap モデルのポップアップ box_javascript スキルの使用の概要

前に、ブートストラップ タブの使用法を説明しました。今日はブートストラップでのモデル ポップアップ ウィンドウの使用法について学びます。

効果:

コード:

<input id="btntext" type="button" value="添加文本组件" data-toggle="modal" data-target="#myModal" href="../SysManage/ZuJianManage.aspx"/>
<!-- Modal -->
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body"></div>
</div>

とても簡単です、それだけです。

注: data-target 属性はモデルの ID を指しているため、ボタンをクリックするとモデルがポップアップ表示されます。

もちろん、js を使用して制御することもできます。

次のコード:

表示: $('#myModal').modal('show');

非表示: $('#myModal').modal('hide');

スイッチ: $('#myModal').modal('toogle');

イベント: $('#myModal').on('hidden', function () {// do something…});

注: ここでは、モデルをリモート URL に移動させるために href 属性を使用しました。もちろん、モデル本体に直接必要な内容を記述することもできます。

モデルの div 構造をよく見ると、model-body がコンテンツを表し、model-header がヘッダーを表すことがわかります。下部に 2 つのボタンを追加したい場合は、次のようにする必要があります。コード。

<div class="modal-footer">
<a href="#" class="btn">关闭</a>
<a href="#" class="btn btn-primary">保存</a>
</div>

注: モデルの幅を設定したい場合は、レイアウトを追加する必要があります。以下のコードブロックにモデルを配置し、モデルの幅を設定するだけです。 style="width:500px" ちなみに、span styleを使用してクラスに直接入れることはできません。 。

<div class="container"></div>

以上は編集者が紹介したBootStrapモデルのポップアップボックスの使い方です。皆さんの参考になれば幸いです。