はじめに
みなさんは、:modalという疑似クラスをご存知でしょうか？
実は、先日Chrome 105とEgde 105がリリースされ、コンテナクエリ@containerと疑似クラス:has()と一緒に疑似クラス:modalもサポートされました。
なので今回は、:modalの具体的な内容の紹介と:modalを使った実装方法の解説を行います。
疑似クラス :modal とは？
疑似クラス :modalは以下の状態の要素のスタイルを変更することができます。
・ JavaScriptの showModal()によって、表示された要素
・ JavaScriptのrequestFullscreen()によって、全画面表示された要素
これら状態で、疑似クラス :modalで指定したスタイルを当てることができます。
具体的に、それぞれの状態を解説していきます!
JavaScriptの showModal()によって、表示された要素
↓こちらを例に解説していきます！
ボタンを押すとモーダルが表示されるはずです。
See the Pen 疑似クラス :modal - 1 by でぐぅー | Qiita (@sp_degu) on CodePen.
HTMLについて
<button id="button">ダイアログを表示する</button>
<dialog id="dialog">
ダイアログ要素
<button id="cancelButton">閉じる</button>
</dialog>
HTMLはこのようになっています！
dialog要素は、デフォルトで display: none;になっており、
<dialog open>...</dialog>このようにopen属性を追加することでダイアログを表示することができます。
CSSについて
dialog:modal {
background-color: red;
}
CSSはこのようになっています！
JavaScriptの showModal()によって表示されたdialog要素の背景を赤に変えています。
そのため、dialog要素にopen属性を追加しても、背景は赤くなりません。
JavaScriptについて
const Button = document.getElementById('button')
const CancelButton = document.getElementById('cancelButton')
const Dialog = document.getElementById('dialog')
Button.addEventListener('click', () => {
Dialog.showModal(); // dialogを表示
});
CancelButton.addEventListener('click', () => {
Dialog.close(); // dialogを非表示
});
JavaScriptはこのようになっています。
最初の3行でdialogを開くボタンとdialogを閉じるボタン、dialog要素を定義します。
dialogを開くボタンをクリックした時に、Dialog.showModal()を実行することで、dialogが表示されます。
こうすることで、疑似クラス:modalのスタイルが当たるというわけです。
dialogを閉じるボタンをクリックした時に Dialog.close();を実行することで、dialogが非表示になります。
JavaScriptのrequestFullscreen()によって、全画面表示された要素
↓こちらを例に解説していきます！
ボタンを押すと全画面表示でフルスクリーンが表示されるはずです。
See the Pen 疑似クラス :modal - 1 by でぐぅー | Qiita (@sp_degu) on CodePen.
HTMLについて
<button id="button">フルスクリーンで表示する</button>
<div id="fullScreen">
フルスクリーン
</div>
HTMLはこのようになっています。
ボタンを押すことで、
div要素が全画面表示されるようにします。
CSSについて
#fullScreen:modal {
color: white;
}
CSSはこのようになっています。
idがdialogの要素(今回だとdiv要素)が全画面表示した時に、
テキストの色が白になるようにします。
ボタンを押す前に、テキストの色が黒になっているのは確認できると思います。
JavaScriptについて
const Button = document.getElementById('button')
const FullScreen = document.getElementById('fullScreen')
Button.addEventListener('click', () => {
FullScreen.requestFullscreen();
});
JavaScriptはこのようになっています。
最初の2行で、全画面表示にするボタンと、全画面表示される要素を定義します。
全画面表示にするボタンをクリックした時に、FullScreen.requestFullscreen()を実行することで、全画面表示される要素が全画面表示されます。
このようにすることで、div要素が全画面表示されたときに疑似クラス:modalのスタイルがあたりテキストの色が白に変わります。
疑似クラス:modal の使用例
画像をクリックすることで、画像が拡大表示されるモーダル
See the Pen 疑似クラス :modal - 1 by でぐぅー | Qiita (@sp_degu) on CodePen.
画像をクリックすることで、画像が全画面表示される
See the Pen 疑似クラス :modal - 2 by でぐぅー | Qiita (@sp_degu) on CodePen.
まとめ
今回は、先日のChrome 105とEgde 105のリリースによってサポートされた、疑似クラス :modalについて紹介、解説しました。
疑似クラス :modalは、サービスの種類によっては、使う頻度が極端に変わってきそうですが、知っていて損はない疑似クラスだと思います。
今回紹介した画像をクリックすることで画像が拡大される以外にも、いろいろな使い方はできそうです。
ぜひ、この記事を読んで、疑似クラス :modalについて理解が深まったという方は、💚いいね・
ストックをお願いします。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。