Span class does not close in Modal window

问题

I've got a two Modal windows, one is for adding data, the other for editing. The following 'Modal' does work, it closes when span (x) is pressed, or any other place is clicked.

  		<span class="close">&times;</span>
		<form id="modal-form" method="POST" action="action.php">    		    
		   <button id="form-submit" type="submit"></button>
		</form>

However, this 'Modal2' does not react to close button. How is that possible? THey are in one html page, and javascript modal.js is included in <body> tag.

	
		<span class="close">&times;</span>
		<form id="modal-form" method="POST" action="action.php">    		    
		 <input type="hidden" id= "idbs" name="idbs" />    		
		 <button id="form-submit" type="submit"></button>
		</form>

and the Javascript for span is:

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

// Get the button that opens the modal
var openBtn = document.getElementById("openModal");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

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

回答1:

Try this:

 // Get the modal
  var modal = document.getElementById('Modal');
  var modal2 = document.getElementById('Modal2');

 // Get the button that opens the modal
 var openBtn = document.getElementById("openModal");

 // Get the <span> element that closes the modal
  var span = document.getElementsByClassName("close")[0];
  var span2 = document.getElementsByClassName("close")[1];
 // When the user clicks on the button, open the modal
 /*openBtn.onclick = function() {
	modal.style.display = "block";
 }*/

 // When the user clicks on <span> (x), close the modal
  span.onclick = function() {
    modal.style.display = "none";
 }
   span2.onclick = function() {
     modal2.style.display = "none";
   }
 // When the user clicks anywhere outside of the modal, close it
   window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }else if(event.target == modal2){
        modal2.style.display = "none";
    }
  }

      <div id="Modal" class="modal">
       <!-- Modal content add data -->
      <div class="modal-content gradient-border">
	  <span class="close" id="span">&times;</span>
	  <form id="modal-form" method="POST" action="catadd.php">
	    <h4 id="modal-form-header">First add</h4>
	    <div class="gradient-border">
		<h5>info</h5>
		 		    <br>
	    <button id="form-submit" class="main-btn" type="submit" value="add">add</button>
        </div>
	 </form>
     </div>
  </div>
       <div id="Modal2" class="modal">
      <!-- Modal content edit data -->
      <div class="modal-content gradient-border">
	  <span class="close" id="span2">&times;</span>
	  <form id="modal-form" method="POST" action="catedit.php">
	    <h4 id="modal-form-header">Second add</h4>
	     <div class="gradient-border">
	 	 <h5>info</h5>
					<br>
	 <input type="hidden" id= "idbs" name="idbs" />
	
	    	    </div>
	    <br>
	    <button id="form-submit" class="main-btn" type="submit" value="edit">add</button>
	 </form>
     </div>
   </div>

回答2:

Hope the below solution works for you. Basically, I pass Modal ID in buttons as data attributes.

Note: I assume that the modal markup structure remains the same, otherwise the code element.parentNode.parentNode... will not work.

On click of the button, the modal dialog is displayed (using data attribute) and on click of span element in the modal, I get handle to parent div (having Modal ID) and close it.

//Display modal
function displayModal(element)
{
	 var modal = document.getElementById(element.dataset.modal);
	 modal.style.display = "block";
}

//Close modal
function closeDialog(element)
{
	var modalID = element.parentNode.parentNode.getAttribute("id");
	 var modal = document.getElementById(modalID);
	modal.style.display = "none";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="Modal" class="modal">
	<!-- Modal content add data -->
	<div class="modal-content gradient-border">
		<span class="close" onclick="closeDialog(this)">&times;</span>
		<form id="modal-form" method="POST" action="cat.php">
			<h4 id="modal-form-header">add</h4>
			<div class="gradient-border">
				<h5>info</h5>
				<br>
				<button id="form-submit" class="main-btn" type="submit" value="add">add</button>
		</form>
		</div>
	</div>
</div>

<div id="Modal2" class="modal">
	<!-- Modal content edit data -->
	<div class="modal-content gradient-border">
		<span class="close" onclick="closeDialog(this)">&times;</span>
		<form id="modal-form" method="POST" action="cat.php">
			<h4 id="modal-form-header">edit </h4>
			<div class="gradient-border">
				<h5>info</h5>
				<br>
				<input type="hidden" id="idbs" name="idbs" />

			</div>
			<br>
			<button id="form-submit" class="main-btn" type="submit" value="edit">edit</button>
		</form>
	</div>
</div>

<button class="openModal" data-modal="Modal" onclick="displayModal(this)">Open modal 1</button>
<button class="openModal" data-modal="Modal2" onclick="displayModal(this)">Open modal 2</button>

来源：https://stackoverflow.com/questions/46271503/span-class-does-not-close-in-modal-window

标签

javascript

html

modal-dialog