モーダルウィンドウ 【モーダルウィンドウ】プラグインを利用してhtml内のソースを表示【modaal.js】
jQueryプラグインのmodaal.jsを利用します。レスポンシブ対応で、bodyのスクロールバーは非表示です。html内のソースをidで指定してモーダルウィンドウ内に表示します。
モーダルウィンドウ
モーダルウィンドウ モーダルウィンドウ 【モーダルウィンドウ】jquery.magnific-popup.jsにフェードイン・フェードアウトの動作を実装
jQueryプラグインのjquery.magnific-popup.jsのオプション設定とCSSを利用して、モーダルウィンドウ表示時のフェードイン・フェードアウトの動作を実装します。
モーダルウィンドウ 【モーダルウィンドウ】jquery.magnific-popup.jsを利用してYouTubeの動画を再生
jQueryプラグインのjquery.magnific-popup.jsを利用して、モーダルウィンドウ内にYouTubeの動画を再生します。動画はレスポンシブ対応にします。
モーダルウィンドウ 【モーダルウィンドウ】プラグインを利用してhtml内のソースを表示【jquery.magnific-popup.js】
jQueryプラグインのjquery.magnific-popup.jsを利用します。レスポンシブ対応で、bodyのスクロールバーは非表示です。html内のソースをidで指定してモーダルウィンドウ内に表示します。
モーダルウィンドウ 【モーダルウィンドウ】プラグインを利用せずjQueryで実装
モーダルウィンドウをプラグインを利用せず、html、CSS、jQueryの記述で実装します。レスポンシブ対応です。モーダルウィンドウは画面中央に表示させ、bodyのスクロールバーは非表示にします。
モーダルウィンドウ 【モーダルウィンドウ】Bootstrap4を利用する場合
Bootstrap4を利用したモーダルウィンドウのサンプルです。
モーダルウィンドウを画面中央に表示、モーダルウィンドウ内で縦スクロール、特大サイズのモーダルウィンドウを表示、といった新機能があります。なおhtmlのコードは、Bootstrap3から一部変更箇所があります。
モーダルウィンドウ 【モーダルウィンドウ】Bootstrap3を利用する場合
Bootstrap3を利用したモーダルウィンドウのサンプルです。
モーダルウィンドウを表示で背景のスクロールバーは非表示となり、スクロールできなくなります。また、背景をクリックしてもモーダルウィンドウを閉じない動作や、モーダルウィンドウの表示サイズ変更もオプションで簡単に実装できます。