Jquery: если щелкнуть ссылку, откройте всплывающее окно и закройте все текущие всплывающие окна, которые открыты

Мне удалось создать команду jQuery, которая открывает всплывающее окно (.more-news). На этой странице есть несколько ссылок, которые открывают различные всплывающие окна. У этого всплывающего окна есть кнопка закрытия, но если пользователь щелкнет другую ссылку, которая откроет другое всплывающее окно, оно будет накладываться друг на друга, как показано на изображении. Чтобы избежать этого, мне нужна команда 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;
        });
    });

введите здесь описание изображения


javascript html jquery css fadein
person Daniel Ramirez-Escudero    schedule 06.10.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Если все всплывающие окна имеют общий класс .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

person skimberk1    schedule 06.10.2013
comment
Это подход, о котором я думал, но проблема заключалась в том, что он появлялся и исчезал. Пока я не увидел, что мне нужен класс того же уровня, поэтому more-btn должен был применить класс more-new к той же статье. Если это дочерний элемент, он не будет работать, так как родительский элемент будет скрыт. Если в будущем у меня будет много постов, у меня будет адский код jquery. Есть ли лучший метод, который не сделает код jquery таким бесконечным? - person Daniel Ramirez-Escudero; 07.10.2013
comment
На данный момент я сделал следующее. Я добавил jqpost в ту же строку, что и .more-block-1, и добавил следующую строку, вдохновленную вашим решением: $(.more-btn-1).on('click', function() { $('.jqpost ').fadeOut(); $('.more-block-1').fadeIn('slow'); return false; }); Это означает, что мне не нужно писать новую строку для каждого нового сообщения. - person Daniel Ramirez-Escudero; 07.10.2013
comment
Я обновил ответ примером, который не требует повторения. Теперь все, что вам нужно сделать, это указать номер всплывающего окна в атрибуте data-popup. - person skimberk1; 07.10.2013
comment
всплывающее окно данных? это заставит меня не вставлять номер в класс? Это было бы чудесно. Таким образом, он обнаружит номер другим методом, а не через имя класса. Действительно умный! Я прав? - person Daniel Ramirez-Escudero; 07.10.2013
comment
Спасибо вам обоим. Пример примера DRYer — это именно то, что я искал. не думал об использовании атрибута данных. Большое спасибо! - person Daniel Ramirez-Escudero; 07.10.2013

arrow_upward
1
arrow_downward

Попробуйте это: я предположил, что все ваши всплывающие окна начинаются с больше блока

$(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;       
   });
});
person Dvir    schedule 06.10.2013
comment
Каждый класс сообщений называется more-block-{number} Таким образом, каждое сообщение, первое — это more-block-1, второе — more-block-2 и так далее. Знаете ли вы метод, который нацелен только на больше блоков и исчезает в зависимости от числа? Таким образом, в этом примере он обнаружит -1. - person Daniel Ramirez-Escudero; 07.10.2013
comment
это то, что я пытался сделать. поймать все классы, которые начинаются с блока more-block. Я не понял, что вы спросили. что вы имеете в виду, нацеливается только на большее количество блоков и исчезает в зависимости от числа? - person Dvir; 07.10.2013
comment
Может быть, мы говорим об одном и том же... Значит, этот кусок кода означает классы, начинающиеся с more-block? Это означало бы, что класс был .more-block-1 строкой $(div[class*='more-block']).hide(); будет работать, поскольку класс имеет строку с большим количеством блоков внутри имени класса? - person Daniel Ramirez-Escudero; 07.10.2013
comment
Да. символ * говорит, что все, что содержит строку more-block, что также more-block-1, more-block-2, more-block-3 и т. д. Так, например: он скроет все дополнительные блоки, а затем исчезнет больше блока-1. - person Dvir; 07.10.2013
comment
только что проверил ваш код, и он не работает с моей разметкой. Я имел в виду следующее... чтобы не создавать новую функцию для каждого нового сообщения, которое я хотел бы знать, например, есть ли метод для определения числа в строке класса, поэтому мне не нужно добавлять новый класс, который объединяет все посты вместе. Поэтому я пытаюсь выяснить, есть ли метод, с помощью которого я мог бы использовать тот же класс, в данном случае .more-block-1, поэтому я не стал добавлять новый класс только для jquery. Это понятно? Может я не так ясно... - person Daniel Ramirez-Escudero; 07.10.2013
comment
Я думаю, что понимаю тебя. Вы имеете в виду получить цифру из класса для элемента, связанного с событием клика. Правильно? А потом скрыть все и конкретный элемент fadeIn? - person Dvir; 07.10.2013
comment
давайте продолжим это обсуждение в чате - person Daniel Ramirez-Escudero; 07.10.2013