ブートストラップモーダルボックス (Modal) plug-in_html/css

使用法

Instance

方法

实例

事件

ホームページ

ウェブフロントエンド

htmlチュートリアル

ブートストラップモーダルボックス (Modal) plug-in_html/css_WEB-ITnose

Jun 24, 2016 am 11:40 AM

http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

モーダルは親フォームをカバーする子フォームです。通常、その目的は、親フォームを離れることなく何らかの対話が可能な別のソースからのコンテンツを表示することです。サブフォームは情報や対話などを提供します。

このプラグインの機能を個別に参照したい場合は、modal.jsを参照する必要があります。あるいは、ブートストラッププラグインの概要の章で説明したように、bootstrap.js または bootstrap.min.js の縮小バージョンを参照することもできます。

使用法

モーダルプラグインの非表示コンテンツを切り替えることができます:

data 属性を通して : コントローラー要素 (ボタンやリンクなど) に属性 data-toggle="modal" を設定します。、同時に data-target="#identifier" または href="#identifier" を設定して、切り替える特定のモーダル (id="identifier" を使用) を指定します。

JavaScript 経由: この手法を使用すると、JavaScript の単純な行で id="identifier" を指定してモーダルを呼び出すことができます:

$('#identifier').modal(options)

ログイン後にコピー

Instance

以下のような静的なモーダルウィンドウインスタンス表示例:

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Bootstrap 实例 - 模态框（Modal）插件&lt;/title&gt; &lt;link href=&quot;/bootstrap/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt; &lt;script src=&quot;/scripts/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;/bootstrap/js/bootstrap.min.js&quot;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h2&gt;创建模态框（Modal）&lt;/h2&gt; &lt;!-- 按钮触发模态框 --&gt; &lt;button class=&quot;btn btn-primary btn-lg&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt; 开始演示模态框 &lt;/button&gt; &lt;!-- 模态框（Modal） --&gt; &lt;div class=&quot;modal fade&quot; id=&quot;myModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt; &lt;div class=&quot;modal-dialog&quot;&gt; &lt;div class=&quot;modal-content&quot;&gt; &lt;div class=&quot;modal-header&quot;&gt; &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt; &amp;times; &lt;/button&gt; &lt;h4 class=&quot;modal-title&quot; id=&quot;myModalLabel&quot;&gt; 模态框（Modal）标题 &lt;/h4&gt; &lt;/div&gt; &lt;div class=&quot;modal-body&quot;&gt; 在这里添加一些文本 &lt;/div&gt; &lt;div class=&quot;modal-footer&quot;&gt; &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-dismiss=&quot;modal&quot;&gt;关闭 &lt;/button&gt; &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt; 提交更改 &lt;/button&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- /.modal-content --&gt; &lt;/div&gt;&lt;!-- /.modal --&gt; &lt;/body&gt; &lt;/html&gt;

ログイン後にコピー

結果は次のようになります:

コードの説明:

モーダルウィンドウを使用するには、何らかのトリガーが必要です。ボタンまたはリンクを使用できます。ここではボタンを使用しています。

上記のコードをよく見ると、<button> タグ内で data-target="#myModal" がページにロードするモーダルのターゲットであることがわかります。ページ上に複数のモーダルを作成し、モーダルごとに異なるトリガーを作成できます。当然のことですが、複数のモジュールを同時に読み込むことはできませんが、異なる時間に読み込まれる複数のモジュールをページ上に作成することはできます。

モーダルボックスでは 2 つの点に注意する必要があります。

1 つ目は .modal で、<div> のコンテンツをモーダルボックスとして識別するために使用されます。

2 つ目は .fade クラスです。モーダルを切り替えると、コンテンツがフェードインまたはフェードアウトします。

aria-labeledby="myModalLabel"、この属性はモーダルボックスのタイトルを参照します。

属性

aria-hidden="true" は、トリガーが起動される (関連するボタンをクリックするなど) までモーダルウィンドウを非表示にしておくために使用されます。

<div class="modal-header">、modal-header は、モーダルウィンドウのヘッダーのスタイルを定義するクラスです。

class="close"、close は、モーダルウィンドウの閉じるボタンのスタイルを設定するために使用される CSS クラスです。

data-dismiss="modal" は、カスタム HTML5 データ属性です。ここではモーダルウィンドウを閉じるために使用されます。

class="modal-body"

は、Bootstrap CSS の CSS クラスで、モーダルウィンドウの本体のスタイルを設定するために使用されます。 class="modal-footer"

は、Bootstrap CSS の CSS クラスで、モーダルウィンドウの下部のスタイルを設定するために使用されます。

data-toggle="modal"、HTML5 カスタムデータ属性 data-toggle は、モーダルウィンドウを開くために使用されます。

オプションモーダルウィンドウ (モーダルウィンドウ) の外観をカスタマイズするために使用できるオプションがいくつかあります。それらは data 属性または JavaScript を通じて渡されます。次の表に、これらのオプションを示します。

オプション名タイプ/デフォルト値データプロパティ名説明

backdropブール値または文字列 'static' デフォルト値: truedata-backdropboolean デフォルト値: truedata-keyboardboolean デフォルト値: truedata-showpath デフォルト値: falsedata-remote

方法

下面是一些可与 modal() 一起使用的有用的方法。

	静的な背景を指定します。ユーザーがモーダルボックスの外側をクリックしても、モーダルボックスは閉じられません。		keyboard
	falseに設定すると、キーは無効になります。		show
	初期化時にモーダルを表示します。		remote
	jQuery .load メソッドを使用して、モーダルボックスの本体にコンテンツを挿入します。有効な URL を含む href を追加すると、その中のコンテンツがロードされます。次の例に示すように: <a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a> ログイン後にコピー

方法描述实例

Options: .modal(options)	把内容作为模态框激活。接受一个可选的选项对象。	$('#identifier').modal({ keyboard: false }) ログイン後にコピー
Toggle: .modal('toggle')	手动切换模态框。	$('#identifier').modal('toggle') ログイン後にコピー
Show: .modal('show')	手动打开模态框。	$('#identifier').modal('show') ログイン後にコピー
Hide: .modal('hide')	手动隐藏模态框。	$('#identifier').modal('hide') ログイン後にコピー

实例

下面的实例演示了方法的用法：

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Bootstrap 实例 - 模态框（Modal）插件方法&lt;/title&gt; &lt;link href=&quot;/bootstrap/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt; &lt;script src=&quot;/scripts/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;/bootstrap/js/bootstrap.min.js&quot;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h2&gt;模态框（Modal）插件方法&lt;/h2&gt; &lt;!-- 按钮触发模态框 --&gt; &lt;button class=&quot;btn btn-primary btn-lg&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt; 开始演示模态框 &lt;/button&gt; &lt;!-- 模态框（Modal） --&gt; &lt;div class=&quot;modal fade&quot; id=&quot;myModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt; &lt;div class=&quot;modal-dialog&quot;&gt; &lt;div class=&quot;modal-content&quot;&gt; &lt;div class=&quot;modal-header&quot;&gt; &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;&times; &lt;/button&gt; &lt;h4 class=&quot;modal-title&quot; id=&quot;myModalLabel&quot;&gt; 模态框（Modal）标题 &lt;/h4&gt; &lt;/div&gt; &lt;div class=&quot;modal-body&quot;&gt; 按下 ESC 按钮退出。 &lt;/div&gt; &lt;div class=&quot;modal-footer&quot;&gt; &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-dismiss=&quot;modal&quot;&gt;关闭 &lt;/button&gt; &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt; 提交更改 &lt;/button&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- /.modal-content --&gt; &lt;/div&gt;&lt;!-- /.modal-dialog --&gt; &lt;/div&gt;&lt;!-- /.modal --&gt; &lt;script&gt; $(function () { $('#myModal').modal({ keyboard: true })}); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;

ログイン後にコピー

结果如下所示：

只需要点击 ESC 键，模态窗口即会退出。

事件

下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。

事件描述实例

show.bs.modal	在调用 show 方法后触发。	$('#identifier').on('show.bs.modal', function () { // 执行一些动作... }) ログイン後にコピー
shown.bs.modal	当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。	$('#identifier').on('shown.bs.modal', function () { // 执行一些动作... }) ログイン後にコピー
hide.bs.modal	当调用 hide 实例方法时触发。	$('#identifier').on('hide.bs.modal', function () { // 执行一些动作... }) ログイン後にコピー
hidden.bs.modal	当模态框完全对用户隐藏时触发。	$('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... }) ログイン後にコピー

实例

下面的实例演示了事件的用法：

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Bootstrap 实例 - 模态框（Modal）插件事件&lt;/title&gt; &lt;link href=&quot;/bootstrap/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt; &lt;script src=&quot;/scripts/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;/bootstrap/js/bootstrap.min.js&quot;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h2&gt;模态框（Modal）插件事件&lt;/h2&gt; &lt;!-- 按钮触发模态框 --&gt; &lt;button class=&quot;btn btn-primary btn-lg&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt; 开始演示模态框 &lt;/button&gt; &lt;!-- 模态框（Modal） --&gt; &lt;div class=&quot;modal fade&quot; id=&quot;myModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt; &lt;div class=&quot;modal-dialog&quot;&gt; &lt;div class=&quot;modal-content&quot;&gt; &lt;div class=&quot;modal-header&quot;&gt; &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;&times; &lt;/button&gt; &lt;h4 class=&quot;modal-title&quot; id=&quot;myModalLabel&quot;&gt; 模态框（Modal）标题 &lt;/h4&gt; &lt;/div&gt; &lt;div class=&quot;modal-body&quot;&gt; 点击关闭按钮检查事件功能。 &lt;/div&gt; &lt;div class=&quot;modal-footer&quot;&gt; &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-dismiss=&quot;modal&quot;&gt; 关闭 &lt;/button&gt; &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt; 提交更改 &lt;/button&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- /.modal-content --&gt; &lt;/div&gt;&lt;!-- /.modal-dialog --&gt; &lt;/div&gt;&lt;!-- /.modal --&gt; &lt;script&gt; $(function () { $('#myModal').modal('hide')})}); &lt;/script&gt; &lt;script&gt; $(function () { $('#myModal').on('hide.bs.modal', function () { alert('嘿，我听说您喜欢模态框...');}) }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;

ログイン後にコピー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。