【Javascript】Javascript/Cssでモーダルを作ってみた - Qiita

初めに ボタンを押したら周りの背景が薄暗くなり、画面の真ん中に出てくるウィンドウが気になり、javascriptとcssを使って実装してみました。また、自分なりに学習し学んだ内容を記事にしてみました。 ※内容に間違いなどがある場合はご指摘をよろしくお願いします。 モーダルとは 英語でmodal。「様式の」「形態の」の意味で、ボタンを押したらブラウザ上に現れるウィンドウのこと。閉じるボタンを押すまで他の操作ができなくなる画面のこと。 実装における主な概念 ❶HTMLのタグとCSSのz-indexを利用し3つの層を作る ❷overlayという名前のタグを作り、ベースとなる画面を被せる薄暗いレイヤーを用意する ❸ボタンを押した時に画面の一番手前に出てくるmodalという名前のタグを作る。 ❹hiddenというクラス名をmodalタグやoverlayタグにあらかじめ付けておく ❺cssでhidde