HTMLのdialogタグとJavascriptを使って実装します。
.showModal()メソッドを使用してダイアログを開くとモーダルになります。
<head>
<script>
window.addEventListener('load', function() {
var modalDialog = document.getElementById('modalDialog');
var modalOpen = document.getElementById('btn_open');
var modalClose = document.getElementById('btn_close');
modalOpen.addEventListener('click', function() {
modalDialog.showModal();
});
modalClose.addEventListener('click', function() {
modalDialog.close();
});
});
</script>
</head>
<body>
<div style="text-align: center;">
<input type="button" id="btn_open" value="開く">
</div>
<dialog id="modalDialog">
<h2>モーダルウインドウ</h2>
<p>
dialogタグを使った
モーダルウインドウ
</p>
<input type="button" id="btn_close" value="閉じる">
</dialog>
</body>
「開く」を押下すると以下のようにダイアログが表示され、ダイアログで操作を終え閉じるまではバック画面での操作ができない状態にできます。
業務で最近のブラウザにネイティブ対応させるためモーダルウインドウについて調べていたところ、複数パターンを見つけ試してみたくなり、今回はこのパターンを記事にしました。
※業務ではシステムがレガシーすぎてこの方法は不採用でした。笑
別記事で他の実装方法も載せていく予定です。
コメント