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;