(Sample)
【modal】とは「モードに入っている」という程度の意味です。
後ろの画面は制御できないようにすることで前画面に集中してもらえます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>modal-window.html</title>
<style>
/* モーダルを中央に配置するためのスタイル */
.wrapper {
height: 100vh; /* ブラウザのビューポートの高さを全体に設定 */
display: flex; /* フレックスボックスとして表示 */
align-items: center; /* 子要素を垂直方向中央に配置 */
justify-content: center; /* 子要素を水平方向中央に配置 */
}
/* リンクのスタイル */
.wrapper a {
display: inline-block; /* 要素をインラインブロックとして表示 */
text-decoration: none; /* リンクの下線を削除 */
padding: 15px; /* リンクの内側にパディングを追加 */
background-color: #fff; /* リンクの背景色を白に設定 */
border-radius: 3px; /* リンクの角を少し丸くする */
color: #ccc; /* リンクのテキスト色を薄いグレーに設定 */
}
/* モーダルウィンドウの基本スタイル */
.my_modal {
visibility: hidden; /* モーダルを非表示に設定 */
opacity: 0; /* モーダルの不透明度を0に設定 */
position: absolute; /* モーダルの位置を絶対位置に設定 */
top: 0; /* モーダルをビューポートの上端から0pxの位置に設定 */
right: 0; /* モーダルをビューポートの右端から0pxの位置に設定 */
bottom: 0; /* モーダルをビューポートの下端から0pxの位置に設定 */
left: 0; /* モーダルをビューポートの左端から0pxの位置に設定 */
display: flex; /* フレックスボックスとして表示 */
align-items: center; /* 子要素を垂直方向中央に配置 */
justify-content: center; /* 子要素を水平方向中央に配置 */
background: rgba(77, 77, 77, .7); /* 背景を半透明の灰色に設定 */
transition: all .4s; /* すべてのプロパティを0.4秒で遷移させる */
}
/* targetとなったときのモーダルウィンドウのスタイル
（表示） */
.my_modal:target {
visibility: visible; /* モーダルを表示に設定 */
opacity: 1; /* モーダルの不透明度を1に設定 */
}
/* モーダルウィンドウのコンテンツ部分のスタイル */
.my_modal__content {
border-radius: 4px; /* コンテンツの角を少し丸くする */
position: relative; /* コンテンツの位置を相対位置に設定 */
width: 500px; /* コンテンツの幅を500pxに設定 */
max-width: 90%; /* コンテンツの最大幅をビューポートの90%に設定 */
background: #fff; /* コンテンツの背景色を白に設定 */
padding: 1em 2em; /* コンテンツの内側にパディングを追加 */
}
/* モーダルウィンドウの閉じるボタンのスタイル */
.my_modal__close {
position: absolute; /* ボタンの位置を絶対位置に設定 */
top: 10px; /* ボタンを上端から10pxの位置に設定 */
right: 10px; /* ボタンを右端から10pxの位置に設定 */
color: #ccc; /* ボタンのテキスト色を薄いグレーに設定 */
text-decoration: none; /* ボタンの下線を削除 */
}
</style>
</head>
<body>
<!-- モーダルウィンドウを開くリンク -->
<div class="wrapper">
<a href="#my_modal-window">クリックしてモーダルウィンドウ</a>
<!-- モーダルウィンドウを開くためのリンク。hrefにはモーダルウィンドウのIDが指定されている -->
<!-- ウィンドウを閉じるリンク -->
<p><a href="#" onClick="window.close(); return false;">このウィンドウを閉じる</a></p>
<!-- クリックするとウィンドウが閉じるリンク。JavaScriptのwindow.close()関数が使用されている -->
</div>
<!-- モーダルウィンドウ本体 -->
<div id="my_modal-window" class="my_modal">
<div class="my_modal__content">
<h1>モーダルウィンドウ</h1>
<!-- 画像の挿入 -->
<p>
<img src="https://picsum.photos/500">
<!-- ランダムな画像を挿入。picsumサービスを使用 -->
</p>
<!-- テキストの挿入 -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<!-- テキストブロック（ダミーテキスト） -->
</p>
<!-- 外部リンク -->
<a href='https://saycon.co.jp/'>セイ・コンサルティング・グループのサイトへ</a>
<!-- 外部サイトへのリンク -->
<!-- 戻るリンク -->
<a href="javascript:history.back()">戻る</a>
<!-- クリックするとブラウザの履歴を一つ戻るリンク。JavaScriptのhistory.back()関数が使用されている -->
<!-- モーダルウィンドウを閉じるリンク -->
<a href="#" class="my_modal__close">×</a>
<!-- クリックするとモーダルウィンドウが閉じるリンク -->
</div>
</div>
</body>
</html>