模态窗口不会关闭

Question

这是我从我前面的话题 Creating Multiple Modals on a Single Page

在下面的意见，他们都完美地工作有跟进的问题，我的假设下，我能上的工作模式图像与按钮元素相反，但似乎并非如此。我可以完美地打开模式，但×不会触发模态的关闭，我不知道为什么。我禁用了所有附加到我的页面的CSS，并且假设某些内容会干扰它，但是我对相同的结果感兴趣，所以我有理由相信问题在JavaScript内？谁会有任何想法如何解决它？谢谢。

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

 
    // Get the button that opens the modal 
 
    var btn = document.getElementsByClassName("myBtn"); 
 

 

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

 
    // When the user clicks the button, open the modal 
 
    btn[0].onclick = function() { 
 
    modal[0].style.display = "block"; 
 
    } 
 

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

 
    span[1].onclick = function() { 
 
    modal[1].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"; 
 
    } 
 
    }

<div class="four columns"> 
 
    <div class="myBtn"> 
 
    <figure class="effect-zoe"> 
 
    <img src="images/sample-1.jpg" alt="img25"/> 
 
    <figcaption> 
 
    <h2>Kinetic Kids Rebrand</h2> 
 
    <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p> 
 
    </figcaption> \t \t \t 
 
    </figure> 
 

 
    <!-- The Modal --> 
 
    <div id="myModal" class="modal"> 
 

 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
    <span class="close">×</span> 
 
    <h2>Project 1</h2> 
 
    </div> 
 
    <div class="modal-body"> 
 
    <img src="images/sample-1.jpg" alt="img25"/> 
 
    <p>Some text in the Modal Body</p> 
 
    <p>Some other text...</p> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
       
 
       
 
    <div class="four columns"> 
 
    <div class="myBtn"> 
 
    <figure class="effect-zoe"> 
 
    <img src="images/sample-1.jpg" alt="img25"/> 
 
    <figcaption> 
 
\t \t \t \t \t 
 
    <h2>Cyber Block App</h2> 
 
    <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p> 
 
    </figcaption> \t \t \t 
 
    </figure> 
 

 
    <!-- The Modal --> 
 
    <div id="myModal2" class="modal"> 
 

 
    <!-- Modal content --> 
 
    <div class="modal2-content"> 
 
    <div class="modal-header"> 
 
    <span class="close">×</span> 
 
    <h2>Project 2</h2> 
 
    </div> 
 
    <div class="modal-body"> 
 
    <p>Some text in the Modal Body</p> 
 
    <p>Some other text...</p> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div>

Answer 1

你的问题是，你的跨度关闭模式是“按钮”打开的模态的div中。

当点击事件触发跨度时，它也触发父div。所以模态立即被隐藏，然后重新显示。

为了解决这个问题，只要确保你从DIV的模态分离按钮的DIV：

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

 
// Get the button that opens the modal 
 
var btn = document.getElementsByClassName("myBtn"); 
 

 

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

 
// When the user clicks the button, open the modal 
 
btn[0].onclick = function() { 
 
modal[0].style.display = "block"; 
 
} 
 

 
btn[1].onclick = function() { 
 
modal[1].style.display = "block"; 
 
} 
 

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

 
span[1].onclick = function() { 
 
modal[1].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"; 
 
} 
 
}

<div class="four columns"> 
 
<div class="myBtn"> 
 
    <figure class="effect-zoe"> 
 
     <img src="images/sample-1.jpg" alt="img25" /> 
 
     <figcaption> 
 
      <h2>Kinetic Kids Rebrand</h2> 
 
      <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p> 
 
     </figcaption> 
 
    </figure> 
 
</div> 
 

 
<!-- The Modal --> 
 
<div id="myModal" class="modal"> 
 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <span class="close">×</span> 
 
      <h2>Project 1</h2> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <img src="images/sample-1.jpg" alt="img25" /> 
 
      <p>Some text in the Modal Body</p> 
 
      <p>Some other text...</p> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div> 
 

 
<div class="four columns"> 
 
<div class="myBtn"> 
 
    <figure class="effect-zoe"> 
 
     <img src="images/sample-1.jpg" alt="img25" /> 
 
     <figcaption> 
 
      <h2>Cyber Block App</h2> 
 
      <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p> 
 
     </figcaption> 
 
    </figure> 
 
</div> 
 

 
<!-- The Modal --> 
 
<div id="myModal2" class="modal"> 
 
    <!-- Modal content --> 
 
    <div class="modal2-content"> 
 
     <div class="modal-header"> 
 
      <span class="close">×</span> 
 
      <h2>Project 2</h2> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>Some text in the Modal Body</p> 
 
      <p>Some other text...</p> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>