jQuery запускает все модальные окна одновременно, даже с разными целевыми #id

Это будет просто, я знаю!! но не могу понять, почему все мои разные модальные окна вызываются одновременно, хотя каждая навигационная ссылка является уникальной ссылкой #id, приписываемой ей.

HTML — СЧА

<div id="main" class="faded-in">
    <h3>
        <a class="js-modal" href="#about">ABOUT</a> &bull; 
        <a class="js-modal" href="#music">MUSIC</a> &bull; 
        <a class="js-modal" href="#live">LIVE</a> &bull;
    </h3>
</div><!-- end of #main -->

HTML — Модальное окно

<article id="about" class="modal faded-out">
    <div class="modal-spiel">
        <p>content</p>
    </div>
</article>

<article id="live" class="modal faded-out">
    <div class="modal-spiel">
        <p>content 2</p>
    </div><!-- end of .modal-spiel -->
</article><!-- end of .modal faded-out -->

css

(в модальных окнах используется полноэкранное наложение, представляющее различное содержимое страницы)

jQuery

}), $(document).ready(function() {
    $(".tubular-mute").click(function() {
        $("a.tubular-mute").toggleClass("tubular-muted")
    }) 
})),$(".js-modal").click(function() {
    $("header, #main, .modal").toggleClass("faded-in").toggleClass("faded-out")
}), $(".modal").click(function() {
    $("header, #main, .modal").toggleClass("faded-in").toggleClass("faded-out")
});

javascript jquery simplemodal
person user3523010    schedule 15.11.2014    source источник
comment
Что у вас с JS? Похоже, что обработчики кликов используются в качестве параметров в вызове функции. Можете ли вы опубликовать полный фрагмент, пожалуйста.   -  person Rory McCrossan    schedule 15.11.2014
comment
Я обновил фрагмент JS, я признаюсь, что взломал чужую оригинальную сборку (обычно сжатые сроки), но есть много других jQuery, используемых для других действий. Думаете, это была начальная сборка фреймворка?   -  person user3523010    schedule 15.11.2014
comment
Есть только три элемента js-modal или это могут быть динамические элементы js-modal?   -  person ekad    schedule 15.11.2014
comment
@ekad только 3 элемента js-modal - начал с одного, но я добавил еще два (каждый действует как отдельный оверлей страницы)   -  person user3523010    schedule 15.11.2014

Ответы (1)


arrow_upward
0
arrow_downward

С помощью этого селектора

$("header, #main, .modal").toggleClass("faded-in").toggleClass("faded-out")

Вы говорите jquery выполнять метод .toggleClass для всех элементов с class="modal", и, поскольку таких элементов больше одного, все ваши модальные окна открываются одновременно.

Предполагая, что ABOUT ссылка с href="#about" открывает #about модальное окно, MUSIC ссылка с href="#music" открывает #music модальное окно, а LIVE ссылка с href="#live" открывает #live модальное окно, вы можете заменить эту часть кода

$(".js-modal").click(function() {
    $("header, #main, .modal").toggleClass("faded-in").toggleClass("faded-out")
})

с этим

$(".js-modal").click(function() {
    $($(this).attr("href")).toggleClass("faded-in").toggleClass("faded-out")
})

Чтобы закрыть модальное окно по клику, замените это

$(".modal").click(function() {
    $("header, #main, .modal").toggleClass("faded-in").toggleClass("faded-out")
});

с этим

$(".modal").click(function() {
    $(this).toggleClass("faded-in").toggleClass("faded-out")
});
person ekad    schedule 15.11.2014
comment
Круто, это половина проблемы, спасибо @ekad, теперь открывается соответствующее окно, но не закрывается по щелчку. действительно нужно узнать больше jQuery. Спасибо хоть. - person user3523010; 15.11.2014
comment
Посмотрите обновленный ответ, я думаю, это закроет модальное окно при нажатии. - person ekad; 15.11.2014
comment
ты @ekad чертовски суперзвезда!!!! очень ценится. Я только что вернул себе субботний вечер :-) - person user3523010; 15.11.2014