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

烘干机示例：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 回答