Question

我需要一些jQuery帮助。我有一些单独的产品div（ .productsWrap ）在页面上显示所有隐藏的信息部分。我们的想法是，当点击特定产品的 a.activator 时，半透明覆盖（ .productsOverlay ）会下降，然后会显示该特定产品的信息部分（的 .productsPopBox ）。页面上可能有十个 .productsWrap ，所以我只希望一次显示一个弹出窗口。

简而言之，如果有人针对给定产品点击 a.activator （.productsWrap），则会出现 .productsOverlay 和 .productsPopBox 那个产品。

HTML标记是：

<section class="productsWrap">
   <section class="blueHeader"><h2></h2></section>
   <article>
      <div class="productsText">
          <a class="activator">Full service details</a>
      </div>
   </article>
</section>

<div class="productsOverlay overlay" style="display:none;"></div>
<div class="productsPopBox popBox" >
    <h2></h2><span class="close">x</span>
</div>

这是我对jQuery的不良尝试：jsfiddle

我的第一次尝试有点奏效。它看起来不错，因为弹出窗口实际上做了一些事情并且效果看起来不错。但是，它会导致所有 .productsWop 的所有 .productsOverlay 和 .productsPopBox 同时下拉。

$('.activator').click(function(){
    $('.productsOverlay, .caseStudiesOverlay').fadeIn('fast',function(){
        $('.productsPopBox, .caseStudiesPopBox').animate({'top':'-150px'},500);
    });
});
$('.productsOverlay, .caseStudiesOverlay, span.close').click(function(){
    $('.productsPopBox, .caseStudiesPopBox').animate({'top':'-1000px'},500,function(){
       $('.productsOverlay, .caseStudiesOverlay').fadeOut('fast');
    });
});

Answer 1

如果你还没有解决你遇到的问题，这里是你在链接的jsfiddle中的修改版本：Link

我不确定你是否会选择“所有产品的一个模式弹出窗口，弹出内容根据点击的产品而变化”或“每个产品都有自己的弹出窗口”。

如果是前者，您应该能够用以下内容替换a.activator的click事件：

$('.activator').click(function (e) {
    $('.productsOverlay, .popupClose, .productsPopBox').fadeOut(250);
    var wrapper = $(this).parents('.wrap');
    var html = $(this).siblings('.hiddenDetails').html();
    wrapper.children('.productsOverlay, .popupClose').fadeIn(250)
        .siblings('.productsPopBox').html(html).fadeIn(250);
});

仅显示当前产品的叠加层。

这是非常粗糙的，但我确信这意味着建立起来很好，对吗？

如何一次显示一个单独的模态弹出窗口？

1 个答案: