如何獲得單獨的模式彈出窗口？

我需要一點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

如何獲得單獨的模式彈出窗口？

回答

相關問題