Javascript2024年5月1日SHAREポストシェアはてブLINE記事にはプロモーションが含まれる場合があります。Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。ここでは、Bootstrap3.3.7に搭載されている「モーダル」の使い方をご紹介します。https://webst8.com/blog/wp-content/uploads/2019/02/modal-window.mp4モーダルは、サイト訪問者に必ず内容を確認して欲しい注意事項の表示などで利用されることが多いですね。運用シーンに注意して利用しよう合わせて読みたい記事BootStrapの基本・環境設定から実施したい方はこちらの記事をご覧ください。Modalsとはモーダルウィンドウとは、先ほどの例の様に、親ウインドウの上に表示される子ウィンドウのことです。モーダルウィンドウ内で表示された操作を完了するかキャンセルをしなければ、ウィンドウが閉じられないのがモーダルウィンドウの特徴です。■表示例https://webst8.com/blog/wp-content/uploads/2019/02/modal-window.mp4モーダルは、サイト訪問者に必ず内容を確認して欲しい注意事項の表示などで利用されることが多いですが、ボタンを押すたびにユーザーの動きを一旦ストップさせてしまいます。そのため多用すると利便性が悪くなるので注意してください。表示例のソースコードは下記の通りです。さまに特化した大阪のWebスクールです。<br>「自分で作る選択を!」ホームページ作成・ワードプレスのスクールならウェブストエイト。WordPress、HTML・CSS、SEO対策、Webマーケティングなどを丁寧に個別指導いたします。さまに特化した大阪のWebスクールです。<br>「自分で作る選択を!」ホームページ作成・ワードプレスのスクールならウェブストエイト。WordPress、HTML・CSS、SEO対策、Webマーケティングなどを丁寧に個別指導いたします。btn-primary">申し込む</button></div></div></div></div>モーダルウィンドウのソースコード解説ここでは、ソースコードの簡単な解説を行います。解説モーダルは、大きくモーダルウインドウ起動用ボタンとボーダルウインドウの2つから構成される。モーダル・ダイアログを呼び出す要素(ここではbutton)のdata-toggle属性にmodalを指定、data-target属性に、モーダル・ダイアログ用div要素のidを指定する(ここでは、modal-1)。モーダルウインドウは、header部分とbody部分、footer部分で構成することができる。動作の原理を理解しようとすると少し難しくなるので、まずはサンプルのコードをコピー&ペーストして、文言を変えたり微調整しながら覚えていきましょう。■使い方の詳細は下記の公式ドキュメントもご参照ください。運用シーンに注意して利用しよう今回は、Bootstrap3.3.7のjavascriptプラグイン「モーダル」についてご紹介しました。https://webst8.com/blog/wp-content/uploads/2019/02/modal-window.mp4モーダルは、サイト訪問者に必ず内容を確認して欲しい注意事項の表示などで利用されることが多いですが、ボタンを押すたびにユーザーの動きを一旦ストップさせてしまいます。そのため、多用するとユーザーの利便性が悪くなりますので、運用シーンに注意して利用するようにしましょう。サンプルのコードをコピー&ペーストして、文言を変えたり微調整しながら覚えていってみてください。今回は以上になります。最後までご覧いただきありがとうございました。