ログインボックスを表示します

検索ガイド -Search Guide-

単語と単語を空白で区切ることで AND 検索になります。
例: python デコレータ ('python' と 'デコレータ' 両方を含む記事を検索します)
単語の前に '-' を付けることで NOT 検索になります。
例: python -デコレータ ('python' は含むが 'デコレータ' は含まない記事を検索します)
" (ダブルクオート) で語句を囲むことで 完全一致検索になります。
例: "python data" 実装 ('python data' と '実装' 両方を含む記事を検索します。'python data 実装' の検索とは異なります。)
当サイトのドメイン名は " getwebtips.net " です。
トップレベルドメインは .net であり、他の .com / .shop といったトップレベルドメインのサイトとは一切関係ありません。
web_development

HTML と CSS だけを利用してモーダルダイアログボックスを実装/表示してみよう! 投稿一覧へ戻る

Published 2022年6月5日17:58 by T.Tsuyoshi

SUPPORT UKRAINE

- Your indifference to the act of cruelty can thrive rogue nations like Russia -

HTML と CSS だけを利用したモーダルダイアログボックスの実装/表示
(implementing/displaying a modal dialog box using HTML and CSS)

モーダルダイアログボックス (modal dialog box / modal dialog / modal window) は、それが表示されている間は他の操作が一切できなくなる種類のウィンドウです。プログラムやウィンドウ上での操作を続けるためには、ユーザーはそのウィンドウが必要とする操作を行いそれを「閉じる」必要があります。その反意語が「モードレス」ですね。
この記事では、HTML と CSS だけを利用してモーダルダイアログを実装/表示する方法を紹介します。
当サイトの右上にある検索ボックス下の「検索ガイド」と書かれたリンクをクリックすると、検索の方法を解説したモーダルダイアログボックスを表示するようになっています:
modal_dialog_screen_shot.png
「検索ガイド」モーダルダイアログボックス
これは HTML と CSS だけで実現していますが非常に簡単に実装できます。利用しているテクニックは、チェックボックス (checkbox) とそれに紐付けたラベル (label) です。
チェックボックスの id にラベルを紐付けることで、そのチェックボックスに対するマウスポインタの「当たり範囲」を拡大することができます。つまり、そのラベルをクリックすることでチェックボックスのチェックをトグルできるようになります。そして、チェックボックスと紐付いているラベルは必ずしも隣り合っている必要はありません。
HTML & CSS の基本的構造は次のようになります:
注意:
このコード内には注意書き用の番号をコメントとして入れていますがその際 # を利用しています。しかし、これは実際のコードでは機能しません。
このコードをコピーして利用する場合は、このコメントを削除するか、CSS スタイル定義内のコメントは /* ... */ 形式に、HTML コード内のコメントは <!-- ... --> 形式に変更してください。
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 62.5%;
}

body {
box-sizing: border-box;
}

* {
margin: 0;
padding: 0;
}

.modal_dialog { # 2
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
padding: 1.5rem;
z-index: 100;
border: .2rem solid goldenrod;
background-color: antiquewhite;
}

.modal_dialog div label {
font-size: 2.5rem;
cursor: pointer;
}

.modal_dialog h1 {
font-size: 3.5rem;
}

.modal_dialog div {
font-size: 2.5rem;
}

.container { # 4
display: grid;
width: 100%;
height: 100%;
padding: 5rem;
justify-items: center;
}

.container nav label {
font-size: 2rem;
cursor: pointer;
}

.container h1 {
font-size: 6rem;
}

.container div {
font-size: 3.5rem;
}

#show_hide_check:checked ~ .modal_dialog { # 3, 5
display: block;
}

#show_hide_check:checked ~ .container { # 3, 5
pointer-events: none;
opacity: .3;
}
</style>
</head>
<body>
<input type="checkbox" id="show_hide_check" hidden> # 1
<div class="modal_dialog"> # 2
<div><label for="show_hide_check">X</label></div> # 3
<h1>これはモーダルダイアログボックスです</h1>
<div>私を消さないとページにはアクセスできませんよ!</div>
</div>
<div class="container"> # 4
<nav>
<label for="show_hide_check">モーダルダイアログボックス表示</label> # 5
</nav>
<h1>ここはメインコンテンツです。</h1>
<div>モーダルダイアログボックスが表示されている間はアクセスできません。</div>
</div>
</body>
</html>
creating_modal_dialog_screen_shot
表示結果
実装時の要点を以下にまとめます:
このチェックボックスは、現在ダイアログボックスが表示されているかいないかを判断するために使用します。ユーザーから見えてはいけませんので hidden 属性を設定します。
これが表示するダイアログボックスになります。初期状態では display: none; が設定されており非表示になっています。また表示時には、ページ内の他のすべてのコンテンツの「上」に位置する必要がありますから、z-index を全ての要素の中で最大に設定します。
このラベルがダイアログボックスを非表示にするための「ボタン」になります。このラベルの for 属性の値をチェックボックスID に設定します。当然ですが、このラベルはダイアログボックス内に配置します。
このページ内の他の全てのコンテンツはこのタグでラップします。
このラベルがダイアログボックスを表示するための「ボタン」になります。このラベルの for 属性の値をチェックボックスID に設定します。当然ですが、このラベルはページコンテンツ内に配置します。
ページコンテンツ内に配置されたラベル No.5 がクリックされチェックボックスにチェックが入ると、CSS スタイルで、ダイアログボックスの display 属性が block に設定され「非表示 → 表示」に、ページ全体の領域では pointer-events: none; の設定によりポインタが効かなくなり opacity: .3; と不透明感を出すことで「無効化」を表現しています。
ユーザーがダイアログボックス内の「X」ラベルをクリックするとチェックボックスのチェックが外れ CSS の設定値が初期状態に戻るため、ダイアログボックスは非表示になり、ページコンテンツが正常表示に戻ります。
いかがでしょうか?実に簡単ですよね。今回は HTML と CSS だけでモーダルダイアログボックスを実装する方法を書いてみました。

この投稿をメールでシェアする

0 comments

コメントはまだありません。

コメントを追加する(不適切と思われるコメントは削除する場合があります)