はじめに
同じプログラミングスクールの受講生が、アプリ開発の体験談を投稿しているのを読みました。その中で「モーダルウィンドウの実装に苦労した」と書かれていて、画面の上に窓を出すだけに見えて、奥が深そうだと感じました。
ところが、調べ始めてみると、そもそも私は「モーダル」と「ポップアップ」の違いをはっきり説明できませんでした。どちらも「画面の上に何かが出てくるもの」というイメージで、同じものだと思っていたからです。
そこで、まずは2つの意味と使いどころを整理してまとめます。
結論
| モーダルウィンドウ | ポップアップウィンドウ | |
|---|---|---|
| 一言でいうと | 閉じるまで、後ろの画面を操作できない窓 | 画面の上に飛び出して表示される窓や要素 |
| 後ろの画面の操作 | できない | できることが多い |
| 主な使いどころ | 削除の確認、ログイン、必ず答えてほしい入力 | 補足の説明、メニュー、別ウィンドウでの表示 |
違いの決め手は、表示している間、後ろの画面を操作できるかどうかです。
モーダルウィンドウとは
モーダルウィンドウは、表示されている間、後ろの画面を操作できなくなる窓です。ユーザーは、モーダルの中で何かを選ぶか、閉じるまで、ほかの操作に戻れません。
「モーダル（modal）」は「モード（mode）」から来た言葉で、「その窓に答えるモードに切り替わる」という意味合いです。
よく使われる場面は次のとおりです。
- 「本当に削除しますか？」という確認
- ログインや会員登録のフォーム
- 処理を進める前に、必ず選んでほしい項目
HTMLでは、<dialog> 要素の showModal() を使うとモーダルを作れます。
<button id="open-modal">モーダルを開く</button>
<dialog id="modal">
<p>本当に削除しますか？</p>
<button id="close-modal">閉じる</button>
</dialog>
<script>
const modal = document.getElementById('modal');
document.getElementById('open-modal').addEventListener('click', () => {
modal.showModal();
});
document.getElementById('close-modal').addEventListener('click', () => {
modal.close();
});
</script>
showModal() で開くと、後ろの画面のボタンは押せなくなります。Escキーでも閉じられます。
ちなみに、同じ <dialog> でも show() で開くと、後ろの画面を操作できる「モードレス」なダイアログになります。モーダルの反対の言葉として、あわせて覚えておくと便利です。
ポップアップウィンドウとは
ポップアップウィンドウは、画面の上に「ポンと飛び出す（pop up）」ように表示される窓のことです。調べてみると、使われ方が2つありました。
1. 新しいブラウザのウィンドウ（本来の意味）
JavaScriptの window.open() で開く、別のブラウザのウィンドウです。
window.open('https://example.com', '_blank', 'width=400,height=300');
以前は広告などで多く使われていたため、今のブラウザには「ポップアップブロック」の機能があります。ユーザーがボタンを押すなどの操作をしないまま開こうとすると、ブロックされることが多いです。
2. 画面の中に飛び出して表示される要素（広い意味）
ヘルプの吹き出しやメニューのように、ページの中で一時的に表示される要素も、まとめて「ポップアップ」と呼ばれることがあります。
HTMLでは、popover 属性を使うと、この種類の要素を作れます。
<button popovertarget="help">ヘルプを表示</button>
<div id="help" popover>入力欄には半角数字を入力してください。</div>
ボタンを押すと表示され、ポップアップの外側をクリックすると自動で閉じます。モーダルと違って、表示中も後ろの画面を操作できます。
使い分け
- ユーザーに必ず答えてほしいとき（削除の確認など）：モーダル
- 操作を止めずに、補足の情報を見せたいとき：ポップアップ（popover）
- 別のページを並べて見せたいとき：新しいウィンドウ（ただし、ポップアップブロックに注意）
モーダルは操作を止めてしまうので、何でもモーダルにすると使いにくい画面になります。「本当に操作を止める必要があるか」を考えて選ぶのが大切だと感じました。
まとめ
- モーダルウィンドウ：閉じるまで後ろの画面を操作できない窓。HTMLでは
<dialog>のshowModal() - ポップアップウィンドウ：画面の上に飛び出して表示される窓。本来は
window.open()で開く別ウィンドウのことで、広い意味ではヘルプやメニューなども含む。HTMLではpopover属性 - 違いの決め手は、後ろの画面を操作できるかどうか
言葉の意味を整理すると、画面を作るときに「この表示はモーダルにするべきか」を考えられるようになりました。今後も、学習の中で曖昧だったことを記事にしていきます。