モーダルウィンドウをJava ScriptとCSSそれぞれで作成する方法
モーダルウィンドウを作成するときの方法として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のみを使用する場合の二通りの方法でモーダルウィンドウを作成する方法について紹介してきました。
参考になりましたら幸いです。
関連記事
HTMLとCSSだけで作るツールチップ
HTMLとCSSだけを利用してツールチップを設置する方法について紹介していきます。 ツールチップ内に表示させる内容を取得する方法として、HTML要素を利用する場合と、CSSの attr() 関数を利用する場合の二通りの方法について紹介していきます。
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
コメントを残す