Span class does not close in Modal window

2019-07-07 15:27发布

站内问答 / JavaScript
1368 2 4

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";
    }
}

2条回答
\"骚年 ilove
2楼-- · 2019-07-07 16:09

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>

查看更多
0人赞 添加讨论(0) 举报
淡お忘
3楼-- · 2019-07-07 16:25

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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)