ホームページ > ウェブフロントエンド > jsチュートリアル > BootStrap モデルのポップアップ box_javascript スキルの使用の概要

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

WBOY
リリース: 2016-05-16 15:03:28
オリジナル
1600 人が閲覧しました

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

効果:

コード:

1

2

3

4

5

6

7

8

<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 つのボタンを追加したい場合は、次のようにする必要があります。コード。

1

2

3

4

<div class="modal-footer">

<a href="#" class="btn">关闭</a>

<a href="#" class="btn btn-primary">保存</a>

</div>

ログイン後にコピー

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

1

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

ログイン後にコピー

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート