Modal与覆盖锚

Question

虽然我很快学习JS我有一个问题，我无法弄清楚。我有一个<div>和<div>模式，其中包含图像和产品名称，当我将鼠标悬停在此<div>上时，我得到一个悬停图标，它是一个<a>。当我点击<div>的图像时，会弹出一个模式 - 这个效果非常出色。但是当我点击<a>模式弹出，然后你被带到链接。当您单击重叠的<a>时，我不希望模式出现。

这里是我的HTML模式：

<div class="modal myModal"> 

<!-- Modal content --> 
<div class="modal-content"> 
    <span class="close">&times;</span> 

    <?php echo $this->stripTags($_product->getName(), null, true) ?> 
    <div class="popup-image-container"> 

    <img id="popup-image" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame($_imageKeepFrame)->resize($_gridImageSize); ?>" srcset="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame($_imageKeepFrame)->resize($_gridImageSize); ?> 1x, <?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame($_imageKeepFrame)->resize($_gridImageSize * 2); ?> 2x" 
          width="75%" height="75%" 
          alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" 
         /></div> 
    <div class="popup-buttons "> 
<button type="button" title="<?php echo $this->__('View Detail') ?>" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check" onclick="setLocation('<?php echo $_product->getProductUrl() ?>')"><span><span><?php echo $this->__('More Detail') ?></span></span></button> 

<button type="button" title="<?php echo $this->__('Visit Store') ?>" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check"onclick="window.open('<?php echo $_helper->productAttribute($_product, $_product->getAdvertiserBuyLink(), 'advertiser_buy_link') ?>', '_blank');"<span><span><?php echo $this->__('Goto Store') ?></span></span></button></p> 
    </div> 
    </div> 
    </div> 

和产品

  <div class="prolabel-wrapper"> 
       <?php echo Mage::helper('prolabels')->getLabel($_product, 'category'); ?> 
       <img id="product-collection-image-<?php echo $_product->getId(); ?>" 
        src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame($_imageKeepFrame)->resize($_gridImageSize); ?>" 
        srcset="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame($_imageKeepFrame)->resize($_gridImageSize); ?> 1x, <?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame($_imageKeepFrame)->resize($_gridImageSize * 2); ?> 2x" 
        width="<?php echo $_gridImageSize ?>" height="<?php echo $_gridImageSize ?>" 
        alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" 
       /> 
       <ul class="add-to-links"> 
        <?php if ($this->helper('wishlist')->isAllow()) : ?> 
         <li class="li-wishlist"><a rel="nofollow" id="wishlist" href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist" title="<?php echo $this->__('Add to Wishlist') ?>" onclick="return false;"><i class="fa fa-heart" aria-hidden="true"></i></a></li> 
        <?php endif; ?> 
        <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?> 
         <li class="li-compare"><a rel="nofollow" href="<?php echo $_compareUrl ?>" class="link-compare" title="<?php echo $this->__('Add to Compare') ?>"><i class="fa fa-plus" aria-hidden="true"></i></a></li> 
        <?php endif; ?> 
       </ul> 
      </div> 

这里是我创建的JS：

var modals = document.getElementsByClassName("modal"); 
// Get the button that opens the modal 
var btns = document.getElementsByClassName("prolabel-wrapper"); 

var spans=document.getElementsByClassName("close"); 

var wishlist=document.getElementsByClassName("link-wishlist"); 

var showPopup = true; 
// Get the modal 
window.onload = function(){ 

for(let i=0;i<wishlist.length;i++) { 
    wishlist[i].onclick = function() { 
     var showPopup = false; 
     alert("Here - showPopup is " + showPopup); 
     modals[i].style.display = "none"; 
     return false; 
    } 
} 

alert("Here2 - showPopup is " + showPopup); 

    if (showPopup){ 

     alert ("Still getting called" + showPopup); 
for(let i=0;i<btns.length && showPopup;i++) { 

     btns[i].onclick = function() { 
     modals[i].style.display = "block"; 
     } 

} 

for(let i=0;i<spans.length && showPopup;i++){ 

     spans[i].onclick = function() { 
     modals[i].style.display = "none"; 
     } 

} 
}} 

我可以得到alert("Here - showPopup is " + showPopup);到弹出窗口，然后返回false取消链接，但模式仍然显示，请任何人都可以指向我在正确的方向？

感谢 克里斯

Answer 1

里面的第一for循环您尝试全局变量showPopup设置为false但是，相反，你宣布一个新的。

尝试更换：

var showPopup = false; 

由：

showPopup = false;