Javascriptイベントハンドラ複数ターゲット

Question

私は1ページに複数のモーダルのjavascriptイベントハンドラを持っています。目標は、ユーザーがモーダル外をクリックしたときにボックスを閉じることです。

1つのページに最大4つのモーダルがあり、2つには3つ、あるものには3つのモーダルが存在する可能性があります。この問題は、2つまたは3つしかない場合に発生します。この機能は、最初のボックスでは機能しますが、3番目のボックスでは機能しません。

ページ上のどのようなモーダルであっても、これを実行する必要があります。

document.onclick = function(event) { 
if (event.target == modal || event.target == modal2 || event.target == modal3 || event.target == modal4) { 
event.target.style.display = "none"; 
} 
} 

https://jsfiddle.net/fastgrowingtrees/w3bo9q29/

Answer 1

このような何かを試してみてください。モーダルを作成または削除するたびに、そのidをモーダル配列から削除します。すべてのモーダルが同じように扱われるので、initコードを再度コピーしなくてもループすることができます。

元のコードでは、モーダルを追加または削除するときにdocument.onclick関数を編集する必要があるため、ここのキーは実際の要素ではなくIDで処理しています。

var modals = ["myModal_1", "myModal_2", "myModal_3", "myModal_4"]; 
    modals.forEach(function(id, index) { 
     var modal = document.getElementById(id), 
      btn = document.getElementById('m' + id.slice(3)), 
      span = document.getElementsByClassName("close")[index]; 
     btn.onclick = function() { 
      modal.style.display = "block"; 
     } 
     span.onclick = function() { 
      modal.style.display = "none"; 
     } 
    }); 
    document.onclick = function(event) { 
     if (modals.indexOf(event.target.id) !== -1) { 
      event.target.style.display = "none"; 
     } 
    } 

Answer 2

ステップ：

document.onclick = function(event) { 
var x=event.target.getAttribute("id"); 
if (x == 'modal' || x == 'modal2' || x == 'modal3' || x == 'modal4') { 
event.target.style.display = "none"; 
} 
}