ダイアログを背景クリックで閉じる

JavaScript

JavaScript

ダイアログを背景クリックで閉じる

dialogは背景クリックで閉じる機能は有りません。このサンプルの様に別途作成する必要が有ります。

<dialog>は背景クリックで閉じる機能は有りません。このサンプルの様に別途作成する必要が有ります。

<dialog>は背景クリックで閉じる機能は有りません。このサンプルの様に別途作成する必要が有ります。

現時点のコードは以下の通り:
/**
 * modal dialog open close
 *
 * author ao-system, Inc.
 * date 2024-03-21
 */
(() => {
	new class {
		'use strict';
		#items = [
			{
				'dialogOpen':	document.getElementById('dialogOpen01'),
				'dialog':		document.getElementById('dialog01'),
				'dialogClose':	document.getElementById('dialogClose01'),
			},
			{
				'dialogOpen':	document.getElementById('dialogOpen02'),
				'dialog':		document.getElementById('dialog02'),
				'dialogClose':	document.getElementById('dialogClose02'),
			},
		];
		constructor() {
			this.#items.forEach((obj) => {
				//開くボタンのクリック
				obj.dialogOpen.addEventListener('click', () => {
					obj.dialog.showModal();
					//フェードインで開く
					obj.dialog.animate(
						[
							{opacity:0},
							{opacity:1},
						],
						{duration:300,fill:'forwards'}
					);
				});
				//閉じるボタンのクリック
				obj.dialogClose.addEventListener('click',() => {
					obj.dialog.close();
				});
				//ブラウザ内のクリック
				//クリックされた場所の親を辿り、ダイアログの前景(内側のdiv)だったら何もしない。
				//ダイアログ自身(この場合はダイアログの背景)だったら閉じる。
				obj.dialog.addEventListener('click',(event) => {
					let tgt = event.target;
					let fore = false;
					for (let i = 0; i < 99; i++) {	//whileで回さずforなのは99回のリミッターを付けたため。記述ミスやブラウザの仕様変更やバグで無限ループを防ぐ。
						if (tgt == obj.dialog.querySelector('div')) {
							fore = true;
							break;
						} else if (tgt == obj.dialog) {
							fore = false;
							break;
						}
						if (tgt.parentNode) {
							tgt = tgt.parentNode;
						} else {
							break;
						}
					}
					if (fore == false) {
						obj.dialog.close();
					}
				});
			});
		}
	}
})();
2024年3月初版
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。