Whenever I click a button, two modal boxes pop up simultaneously. Closing these modal boxes by clicking outside of them causes an issue where the page darkens and becomes unscrollable afterwards.
var modalA = document.getElementById('projectModalSecond2');
// Get the modal
var modal = document.getElementById('projectModal2');
// Close the modals when user clicks outside
window.onclick = function(event) {
//alert(event.target)
if (event.target == modal) {
modal.style.display = "none";
modalA.style.display = "none";
}
if (event.target == modalA) {
modalA.style.display = "none";
modal.style.display = "none";
}
}<div tabindex="0" class="modal fade pop-up-box-index pop-up-box-margin-left" id="projectModal2">
<div class="modal-dialog">
<div class="modal-content pop-up-box-top-margin pop-up-box-index">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><b>Substrate Map Station Controller (SMSC)</b></h4>
</div>
<div class="modal-body">
<img src="assets/img/gallery/ULT_SDT1.jpg" alt="" class="img-responsive">
<p>Full range of station controller.</p>
<br>
</div>
</div>
</div>
</div>
<div tabindex="0" class="modal fade pop-up-box-index pop-up-box-margin-right" id="projectModalSecond2">
<div class="modal-dialog">
<div class="modal-content pop-up-box-top-margin pop-up-box-index">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><b>Substrate Map Editor (SME)</b></h4>
</div>
<div class="modal-body">
<img src="assets/img/gallery/ULT_SDT2.jpg" alt="" class="img-responsive">
<p>Unit and Substrate map traceability</p>
<br><br>
</div>
</div>
</div>
</div>