1

ちょっとした jQuery のヘルプが必要です。ページに多数の個別の製品 div ( .productsWrap ) が表示されており、すべて非表示の情報セクションがあります。特定の製品のa.activatorをクリックすると、半透明のオーバーレイ ( .productsOverlay ) がドロップダウンし、その特定の製品 ( .productsPopBox )の情報セクションが続きます。ページには.productsWrapが 10 個ある可能性があるため、一度に 1 つのポップアップのみを表示する必要があります。

つまり、誰かが特定の製品 (.productsWrap) の.activatorをクリックすると、 .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

私の最初の試みはうまくいきました。ポップアップが実際に何かを行い、効果が良さそうに見える限り、それは良さそうに見えました。ただし、これにより、すべての .productsWrap のすべての.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');
    });
});
4

1 に答える 1

0

発生していた問題を解決していない場合は、リンクされた jsfiddle にあったものの修正版を次に示します。

「クリックされた製品に基づいてポップアップのコンテンツが変化する、すべての製品に対して1つのモーダルポップアップ」または「各製品に独自のポップアップがある」かどうかはわかりませんでした。

前者の場合、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-22T15:09:05.237 に答える