javascript - 带有覆盖 anchor 的模态

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;