モーダルウィンドウをJava ScriptとCSSそれぞれで作成する方法

HTML/CSS JavaScript/jQuery

モーダルウィンドウを作成するときの方法としてJava Scriptを使用する場合と、Java Scriptを使用しないでCSSのみで作成する場合との二つの記述例を紹介します。

どちらの場合も「Open Modal」ボタンのクリックでモーダルウィンドウが開き、「Close Modal」ボタンかモーダルウィンドウ以外の部分のクリックでモーダルウィンドウが閉じるようになっています。
また、モーダルウィンドウ内のコンテンツの量が多い場合にはスクロールで対応でするようにしています。

Java Scriptを使用してモーダルウィンドウを作成する

今回紹介する例では、「.classList.toggle()」を利用しています。IE11ではサポートされていませんので、ご注意ください。

モーダルウィンドウ内のコンテンツの量が少ない場合

See the Pen
BaoQKVr
by saku (@web-saku)
on CodePen.

モーダルウィンドウ内のコンテンツの量が多い場合

モーダルウィンドウ内の文章の量だけ変更しています。

See the Pen
LYpbRxX
by saku (@web-saku)
on CodePen.

CSSのみを使用してモーダルウィンドウを作成する

今回紹介する例では、チェックボックスを利用してモーダルを開閉しています。

モーダルウィンドウ内のコンテンツの量が少ない場合

See the Pen
WNQoeJg
by saku (@web-saku)
on CodePen.

モーダルウィンドウ内のコンテンツの量が多い場合

モーダルウィンドウ内の文章の量だけ変更しています。

See the Pen
rNOWeGg
by saku (@web-saku)
on CodePen.

以上、Java Scriptを使用する場合と、CSSのみを使用する場合の二通りの方法でモーダルウィンドウを作成する方法について紹介してきました。
参考になりましたら幸いです。

関連記事

コメントを残す





このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください