Tré Thộn を食べたことがありますか？
ベトナム・ビンズオン滞在中の方は是非注文して食べてみて！
絶対に美味しいです！
ホーチミン市内へも配達可能です。お問い合わせください。

Have you ever had "Tré Thộn" before?
If you're living at Bình Dương in Vietnam, you "must" try to order and eat it.
I'm sure you're very surprised how delicious it is!!
If you're in Hồ Chí Minh, you have a chance to get it too. Please call!!

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

Published 2022年6月5日17:58 by mootaro23

SUPPORT UKRAINE

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

Ukraine official website

Ukraine official Instagram

The Official Ukrainian Marketplace - support Ukraine by shopping

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

モーダルダイアログボックス (modal dialog box / modal dialog / modal window) は、それが表示されている間は他の操作が一切できなくなる種類のウィンドウです。プログラムやウィンドウ上での操作を続けるためには、ユーザーはそのウィンドウが必要とする操作を行いそれを「閉じる」必要があります。その反意語が「モードレス」ですね。

この記事では、HTML と CSS だけを利用してモーダルダイアログを実装/表示する方法を紹介します。

当サイトの右上にある検索ボックス下の「検索ガイド」と書かれたリンクをクリックすると、検索の方法を解説したモーダルダイアログボックスを表示するようになっています:

「検索ガイド」モーダルダイアログボックス

これは 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>

表示結果

実装時の要点を以下にまとめます:

このチェックボックスは、現在ダイアログボックスが表示されているかいないかを判断するために使用します。ユーザーから見えてはいけませんので hidden 属性を設定します。

これが表示するダイアログボックスになります。初期状態では display: none; が設定されており非表示になっています。また表示時には、ページ内の他のすべてのコンテンツの「上」に位置する必要がありますから、z-index を全ての要素の中で最大に設定します。

このラベルがダイアログボックスを非表示にするための「ボタン」になります。このラベルの for 属性の値をチェックボックスID に設定します。当然ですが、このラベルはダイアログボックス内に配置します。

このページ内の他の全てのコンテンツはこのタグでラップします。

このラベルがダイアログボックスを表示するための「ボタン」になります。このラベルの for 属性の値をチェックボックスID に設定します。当然ですが、このラベルはページコンテンツ内に配置します。

ページコンテンツ内に配置されたラベル No.5 がクリックされチェックボックスにチェックが入ると、CSS スタイルで、ダイアログボックスの display 属性が block に設定され「非表示 → 表示」に、ページ全体の領域では pointer-events: none; の設定によりポインタが効かなくなり opacity: .3; と不透明感を出すことで「無効化」を表現しています。

ユーザーがダイアログボックス内の「X」ラベルをクリックするとチェックボックスのチェックが外れ CSS の設定値が初期状態に戻るため、ダイアログボックスは非表示になり、ページコンテンツが正常表示に戻ります。

いかがでしょうか？実に簡単ですよね。今回は HTML と CSS だけでモーダルダイアログボックスを実装する方法を書いてみました。

この記事に興味のある方は次の記事にも関心を持っているようです...

- People who read this article may also be interested in following articles ... -

Django の forms は使わずに jQuery で POST / GET リクエスト、レスポンスで template を返してページの一部だけを入れ替えて四択クイズを作ってみた！

【 Using Asyncio in Python 】Python における asyncio を利用した非同期プログラム ( asynchronous programming ) の勉強を継続する前に、今一度スレッド ( thread ) についてのちょっとした復習ノート、まとめてみた

【 Effective Python, 2nd Edition 】プログラムを並列処理 ( concurrency ) パターンへ移行するタイミングとツールを考えるシリーズ第 4 回 - 並列処理 ( concurrency ) 実現のために queue を利用するとリファクタリング ( refactoring ) 作業が大変です、の巻

ウクライナへ１０の質問 [ウクライナ公式インスタグラムストーリーズより翻訳]

1つのIPアドレス、1つのドメインを割り当てている Apache サーバーで、複数のホスト名へのリクエストを VirtualHost で振り分け、それぞれに異なる Let's Encrypt の SSL 証明書を割り当てて HTTPS アクセスを可能にしてみた

Python で学ぶ architecture patterns - DDD (domain driven design) - Repository pattern の巻

Ask Ukraine - be more familiar with Ukraine! ; ウクライナをもっと知ろう！ [ウクライナ公式インスタグラムのストーリーズより翻訳]

検索ガイド -Search Guide-

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

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)

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

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