Question

我有两个Modal窗口，一个用于添加数据，另一个用于编辑。以下“模态”确实有效，当按下span（x）或单击任何其他位置时它会关闭。

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

然而，这个'Modal2'对关闭按钮没有反应。怎么可能？它们位于一个html页面中，javascript modal.js包含在<body>标记中。

	
		<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>

和span的Javascript是：

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

Answer 1

试试这个：

 // 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>

Answer 2

希望以下解决方案适合您。基本上，我将按钮中的模态ID作为data属性传递。

注意：我认为模态标记结构保持不变，否则代码element.parentNode.parentNode...将无效。

单击该按钮，将显示模态对话框（使用数据属性），单击模态中的span元素，我将获得父div的句柄（具有模态ID）并关闭它

＆＃13;

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

＆＃13;

<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>

＆＃13;

Span类未在模态窗口

2 个答案: