Question

虽然我很快学习JS但我有一个问题我无法弄清楚。我有一个位于<div>和<div>的模态，其中包含图片和产品名称，当我将鼠标悬停在此<a>上时，我会得到一个悬停图标{{1} }。当我点击<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;

带有重叠锚点的模态

1 个答案: