0

ポップアップ ( .more-news) を開く jQuery コマンドを作成することができました。このページには、さまざまなポップアップを開くリンクがいくつかあります。このポップアップには閉じるボタンがありますが、ユーザーが別のポップアップを開く別のリンクをクリックすると、画像に示すように互いにオーバーレイされます。これを回避するには、リンクをクリックしてポップアップを開くと、最初に他の開いているポップアップを閉じて、このオーバーレイを回避するjQueryコマンドが必要です。

助言がありますか？

ポップアップを開くリンク付きの投稿:

<article class="news-thumb">
                        <time>08/07/2013</time>
                        <div class="news-info">
                            <img src="images/news/post-2.jpg" alt="#">
                            <h1>Main title</h1>
                            <p>lorem ipsum su madre. Lorem ipsum su madre. Lorem ipsum... </p>
                            <a href="#" class="more-btn-2">Read more <i class="sprites-more-news"></i></a>
                        </div>
                    </article>

ポップアップコード:

<article class="more-block-1">
                        <div class="more-news">
                            <h1>Main title</h1>
                            <a href="#" class="pop-link">
                                <i class="sprites-pop-news-close"></i>
                            </a>
                            <div class="more-text">
                                <p>
                                    Donec a ligula eget dolor ornare adipiscing. Ut varius pulvinar nisi eget feugiat. Sed dictum ante nec pharetra tincidunt. Nulla eget aliquam lacus, vitae ullamcorper lacus. Suspendisse ultricies quis orci in aliquam. Morbi eget elit felis. Etiam consectetur eleifend libero varius lacinia. Proin justo felis, viverra lobortis
                                </p>

                                <p>
                                    Donec a ligula eget dolor ornare adipiscing. Ut varius pulvinar nisi eget feugiat. Sed dictum ante nec pharetra tincidunt. Nulla eget aliquam lacus, vitae ullamcorper lacus. Suspendisse ultricies quis orci in aliquam. Morbi eget elit felis. Etiam consectetur eleifend libero varius lacinia. Proin justo felis, viverra lobortis
                                </p>
                            </div>
                        </div>
                    </article>

ポップアップをフェードインするjqueryコマンド：

すべてのポップアップ コードには共通のクラスがあり.more-newsます。

$(function() {
        $(".more-btn-1").on('click', function() {
            // CODE THAT CLOSES THE REST OF OPEN POP UPS
            $('.more-block-1').fadeIn('slow');
            return false;
        });
    });

ここに画像の説明を入力

4

2 に答える 2

2

すべてのポップアップがクラスを共有している場合.more-news、現在のポップアップを表示する前に、そのクラスを持つすべての要素を非表示にすることができます。

コード：

$(function() {
    $(".more-btn-1").on('click', function() {
        // CODE THAT CLOSES THE REST OF OPEN POP UPS
        $('.more-news').not('.more-block-1').fadeOut();
        $('.more-block-1').fadeIn('slow');
        return false;
    });
});

例: http://codepen.io/skimberk1/pen/28f7917d229a359de7ee13557d742843

DRYer の例: http://codepen.io/skimberk1/pen/a0c35556dd938c87159ebac81d141290

于 2013-10-06T18:28:51.730 に答える
1

これを試してください: すべてのポップアップが more-block で始まると仮定しました

$(function() {
   $("div[class*='more-block']").on('click', function() {
       var $className = $(this).attr("class");       
       var id = $className.substring($className.lastIndexOf('-') + 1);
       $("div[class*='more-block']").hide();
       $('.more-block-' + id).fadeIn('slow');
       return false;       
   });
});
于 2013-10-06T18:28:45.320 に答える