简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

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

WBOY
リリース： 2016-06-24 11:40:06
オリジナル
940 人が閲覧しました

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

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

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态框（Modal）插件</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <h2>创建模态框（Modal）</h2> <!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 开始演示模态框 </button> <!-- 模态框（Modal） --> <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"> &times; </button> <h4 class="modal-title" id="myModalLabel"> 模态框（Modal）标题 </h4> </div> <div class="modal-body"> 在这里添加一些文本 </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 --> </body> </html>
    ログイン後にコピー

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

    コードの説明:

  • モーダルウィンドウを使用するには、何らかのトリガーが必要です。ボタンまたはリンクを使用できます。ここではボタンを使用しています。
  • 上記のコードをよく見ると、
  • モーダル ボックスでは 2 つの点に注意する必要があります。
  • 1 つ目は .modal で、
    のコンテンツをモーダル ボックスとして識別するために使用されます。
  • 2 つ目は .fade クラスです。モーダルを切り替えると、コンテンツがフェードインまたはフェードアウトします。
  • aria-labeledby="myModalLabel"、この属性はモーダル ボックスのタイトルを参照します。
    • 属性
  • aria-hidden="true" は、トリガーが起動される (関連するボタンをクリックするなど) までモーダル ウィンドウを非表示にしておくために使用されます。
    • 、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')
    ログイン後にコピー

    实例

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

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态框（Modal）插件方法</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <h2>模态框（Modal）插件方法</h2> <!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 开始演示模态框 </button> <!-- 模态框（Modal） --> <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">&times; </button> <h4 class="modal-title" id="myModalLabel"> 模态框（Modal）标题 </h4> </div> <div class="modal-body"> 按下 ESC 按钮退出。 </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 --> <script> $(function () { $('#myModal').modal({ keyboard: true })}); </script> </body> </html>
    ログイン後にコピー

    结果如下所示：

    只需要点击 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 () { // 执行一些动作... })
    ログイン後にコピー

    实例

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

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态框（Modal）插件事件</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <h2>模态框（Modal）插件事件</h2> <!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 开始演示模态框 </button> <!-- 模态框（Modal） --> <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">&times; </button> <h4 class="modal-title" id="myModalLabel"> 模态框（Modal）标题 </h4> </div> <div class="modal-body"> 点击关闭按钮检查事件功能。 </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 --> <script> $(function () { $('#myModal').modal('hide')})}); </script> <script> $(function () { $('#myModal').on('hide.bs.modal', function () { alert('嘿，我听说您喜欢模态框...');}) }); </script> </body> </html>
    ログイン後にコピー

     

    関連ラベル：
    Bootstrap 模态框（Modal）插件
    ソース：php.cn
    前の記事：CSS リセットについて (その 3) Normalize-zh.css がリリースされました_html/css_WEB-ITnose 次の記事：UIWebView は静的 HTML ファイルをロードします_html/css_WEB-ITnose
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    子 React コンポーネントに渡された useEffect を使用すると、関数が複数回呼び出される 複数の ChildComponent タグを持つページがあり、ユーザーがどの ChildComponent をクリックしたかに基づいて、各 ChildComponent にどの A...
    から 2024-03-30 15:36:26
    0
    2
    386
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！