よく使う背景固定モーダルのメモ。(デモページ有り)

モーダルを開いている時に背面コンテンツをスクロールさせたくないときに使います。
JavaScript(Vanilla JS),jQueryの両方対応。iOS対応。レスポンシブ対応。

外部jsonファイルデータからHTMLを生成した後でのモーダル表示も対応してます。jsでDOM生成した後にモーダルが開かず困ったことがあったので自分用メモ。

コードの説明はありませんので、「説明はいらねぇ！コピペだけさせろ！」という方だけデモページを参考にどうぞ。
※但し、コードは汚いです。

少しずつ追加する予定。

この記事の目次

JavaScript(Vanilla JS)のモーダル

モーダル内のコンテンツが画面内に収まる時は中央に表示、画面の高さを超える場合はモーダルコンテンツをスクロール。

モーダル内のコンテンツを画面中央に収まるように表示、コンテンツ量が多い場合はモーダルコンテンツ内部だけをスクロール。

コンテンツが多いとHTMLファイルがごちゃごちゃするので、データを外部のjsonファイルにまとめてから読み込んでます。

モーダル内のコンテンツが画面内に収まる時は中央に表示、画面の高さを超える場合はモーダルコンテンツをスクロール。

モーダル内のコンテンツを画面中央に収まるように表示、コンテンツ量が多い場合はモーダルコンテンツ内部だけをスクロール。

コンテンツが多いとHTMLファイルがごちゃごちゃするので、データを外部のjsonファイルにまとめてから読み込んでます。