1 Replies - 220 Views - Last Post: 11 July 2018 - 05:34 PM

#1 JavaThoughts   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 16
  • Joined: 10-April 18

I can't close multiple modal box at the same time

Posted 11 July 2018 - 10:58 AM

Greetings,

I have two modal boxes coming up at the same time when I click a button. So now I'm trying to close the two modal boxes at the same time when I click anywhere outside of the two modal boxes, but only one modal box is removed when I clicked once outside the boxes and I gotta clicked a second time to remove the other one. I can't figure out what's wrong with my code. My code as below :

<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">&times;</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">&times;</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>


<script>
		var modalA = document.getElementById('projectModalSecond2');

		// Get the modal
		var modal = document.getElementById('projectModal2');

		// When the user clicks anywhere outside of the modal, close it
		window.onclick = function(event) {
  		//alert(event.target)
    	if (event.target == modal) {
        modal.style.display = "none";
    	} 
			
  	if(event.target == modalA) {
        modalA.style.display = "none";      
		}
		}
</script>




Thanks in advance.

Is This A Good Question/Topic? 0
  • +

Replies To: I can't close multiple modal box at the same time

#2 JavaThoughts   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 16
  • Joined: 10-April 18

Re: I can't close multiple modal box at the same time

Posted 11 July 2018 - 05:34 PM

Orait, somebody helped me out and the problem lies with my Javascript part.
It's supposed to be :

<script>
		var modalA = document.getElementById('projectModalSecond2');

		// Get the modal
		var modal = document.getElementById('projectModal2');

		// When the user clicks anywhere outside of the modal, close it
		window.onclick = function(event) {
  		//alert(event.target)
    	if (event.target == modal) {
        modal.style.display = "none";
        modalA.style.display = "none"; 
    	} 
			
  		if(event.target == modalA) {
        modal.style.display = "none"; 
        modalA.style.display = "none";      
		}
		}
</script>



Thank you.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1