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

/**
 * 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();
					}
				});
			});
		}
	}
})();