如何获得单独的模式弹出窗口？

我需要一点jQuery的帮助。如何获得单独的模式弹出窗口？

我有一个单独的产品分区（.productsWrap）在页面上显示所有隐藏的信息部分。我们的想法是，当a.activator特定产品被点击半透明的覆盖（.productsOverlay）下落，并随后由该特定产品（.productsPopBox）的信息部分。在页面上可能有10个.productsWrap，所以我只想让其中一个弹出窗口一次显示。

总之，如果有人点击给定产品（.productsWrap）然后.productsOverlay和.productsPopBox将仅出现在该产品a.activator。

的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

我第一次尝试排序工作。它看起来不错，因为弹出窗口实际上做了些什么，效果看起来不错。但是，它导致所有的.productsOverlay和.productsPopBox所有.productsWrap同时下降。

$('.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'); 
    }); 
});

来源

2013-04-21 Bert Murphy

如果我理解正确，你应该看看jQuery通知插件，如[noty]（http://needim.github.io/noty/）。 – excentris 2013-04-21 17:45:36

感谢您的回答，但我希望能够在没有插件的情况下做到这一点。对于一个实际的功能的例子，我已经基于我的工作在以下[链接] http://stackoverflow.com/questions/10444694/hide-show-toggle-separate-divs-with-the-same-class-名称问题是，该示例不适用于jQuery 1.9.1 – 2013-04-21 18:17:37

好吧，现在我明白你真正想要完成的。你打算使用jQuery UI吗？如果是这样，看看[手风琴]（http://jqueryui.com/accordion/）。 – excentris 2013-04-21 18:26:46

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

我不知道，如果你要为“一个所有产品的模式弹出式菜单，弹出式内容根据点击的产品而变化“或”每种产品都有自己的弹出式菜单“。

如果是前者，你应该能够替换Click事件a.activator：

$('.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); 
});

而且只会显示当前产品的覆盖。

这是（非常）粗糙，但我相信这意味着它是很好的基础，对吧？

来源

2013-04-22 15:09:05 exafred

如何获得单独的模式弹出窗口？

回答

相关问题