ブートストラップモーダルボックスの技術解説

私がモーダルについて初めて聞いたのは、先月バオ兄弟が電話で私にインタビューし、フロントエンド モーダルについて知っているかどうか尋ねられたときでした。新しい学期について混乱していたので、バオ兄弟に思い出させてくれるように頼んだところ、それはインターフェイス上のポップアップ ボックスだと教えてくれました。オルタを使ったほうがいいんじゃないでしょうか？ ?

先週は主にフロントエンドのコードを見ていましたが、本当に見苦しくてあまりコメントを書きませんでした...これは良くありません...もっとコメントを書いていただけますか...

今日はモーダルで基本的に理解しました。

モーダルボックスとは何ですか?

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

たとえば、下の図: 「デモンストレーション モーダル ボックスの開始」をクリックするとすぐに、ボックスがポップアップします。このボックスをモーダル ボックスと呼びます

モーダル ボックスとは何かを理解した後、その方法を説明します。 HTMLを書くには毛織物？早速、私の HTML コードを見てみましょう:

76c82f278ac045591c9159d381de2c57100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30e4d0d87937f6c83b675e896c64d3eb7c9b2386ffb911b14667cb8f0f91ea547a7Bootstrap 实例 - 模态框（Modal）插件6e916e0f7d1e588d4f442bf645aedb2fe16c25b0d3200e635c0f304555350fbb9c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86dc1a436a314ed609750bd7c7d319db4da创建模态框（Modal）2e9b454fa8428549ca2e64dfac4625cd253e627dbc2fa01f6214037dd834a664e0279a115e9482989f7cd173365c28be开始演示模态框65281c5ac262bf6d81768915a4a77ac0a98392ec65c6437d6e4b9996f54b3546e15b84117b89cdc64f55f35a64be57a7522dee5a9e032a609c190d198a2bc97ab1f4a67446def6c49a9f0aa21517b1ac0b561c7c414147a96bbbb8cc10c3d06d887f586697bed160e742603972f4d96b×65281c5ac262bf6d81768915a4a77ac05912a214071c80b42e3c910ba38a34bf模态框（Modal）标题0f6dfd1e3624ce5465eb402e300e01ae16b28748ea4df4d9c2150843fecfba686e1ceff927595656120650f97442eabc在这里添加一些文本16b28748ea4df4d9c2150843fecfba68fcea287e1681f6566fd9116658b8e4f0cfd8c5dabb18f775a551e9cd264a3236关闭65281c5ac262bf6d81768915a4a77ac0c0da018427a22f22a069c7d690eece88提交更改65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68e9f77224a0414652ba58ce8584e25a9616b28748ea4df4d9c2150843fecfba68e6b48cd5ccb66bf83010803e33e4e2d016b28748ea4df4d9c2150843fecfba6859971daa6ca9293695a67ea967cd049d2cacc6d41bbb37262a98f745aa00fbf0170100c9ec0ddde5c9387ce2ffa5e5032cacc6d41bbb37262a98f745aa00fbf0d1094dcf8be83095e506452d1d966621
    // 只需要点击 ESC 键，模态窗口即会退出。
    $(function() {
        $('#myModal').modal({
            keyboard: false
        })
    });
2cacc6d41bbb37262a98f745aa00fbf0-->3f1c4e4b6b16bbbd69b2ee476dc4f83a$(function() {
    $('#myModal').modal('hide')
});2cacc6d41bbb37262a98f745aa00fbf03f1c4e4b6b16bbbd69b2ee476dc4f83a$(function() {
    $('#myModal').on('hide.bs.modal',function() {
        alert('嘿，我听说您喜欢模态框...');
    })
});2cacc6d41bbb37262a98f745aa00fbf036cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

それでは、上記のコードをコピーしてブラウザで開いてみると、見た目が悪く、ポップアップ ボックス機能が実現できないことがわかりましたか?どうしてこれなの？おそらく、bootstrap の css と js をインポートしていないことが原因です

まず、bootstrap の公式 Web サイトから bootstrap をダウンロードし、HTML 内で bootstrap の CSS と js を引用しました

正しくインポートできれば、間違いなく確認できます。ブラウザでこのインターフェイスにアクセスします。

効果はすでに存在しています。コードを見てみましょう:

コードの説明:

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

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

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

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

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

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

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

699e085bcbc1be17121184de54cd6b00、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 は、モーダル ウィンドウを開くために使用されます。

メソッド

ここでは、modal() で使用できる便利なメソッドをいくつか紹介します。

メソッド	説明	インスタンス
オプション: .modal(options)	コンテンツをモーダルボックスとしてアクティブ化します。オプションの options オブジェクトを受け入れます。	$('#identifier').modal({keyboard: false})
Toggle: .modal('toggle')	モーダルボックスを手動で切り替えます。	$('#identifier').modal('toggle')
Show: .modal('show')	モーダルボックスを手動で開きます。	$('#identifier').modal('show')
Hide: .modal('hide')	モーダルボックスを手動で非表示にします。	りー

 

事件

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

事件	描述	实例
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 () { // 执行一些动作...})

 

参考资料：

Bootstrap 模态框（Modal）插件

模态框 modal.js

我把modal的练习放到Github上了：模态框

以上がブートストラップモーダルボックスの技術解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。