Много модальных окон. Какие есть способы вызова?

Question

[NinjaSystems]

На сайте есть 7 модальных окон. Как написать код для вызова всех окон? Писать метод для каждого класса модального окна - это неправильно. Может можно сделать один метод с параметрами и вызывать его? Как это делается?

Answer 1

[Надим]

Так и делается, создай функцию для вызова окна с передачей внутрь id нужного окна.

Comments

[NinjaSystems]

Пример можешь показать?

[Надим]

NinjaSystems, я же не экстрасенс, без понятия как вы там заверстали свои модалки. В популярном фреймворке Uikit модалки вызываются так:
Uikit.modal('#id').show();

[Andrey Suha]

NinjaSystems,

function openModal(id) {
    let modal = document.getElementById(id);
    if(modal) modal.classList.add('open');
}

[NinjaSystems]

Andrey Suha, этот метод я размещаю в scripts и передаю id модалок массивом в качестве параметра?

[Andrey Suha]

NinjaSystems, это пример, когда хотите открыть модалку с id test делаете так

openModal("test");

и у этой модалки появится класс open. Это просто пример, не думайте что Вы сейчас вставите этот код себе и он заработает. Как Вам ответили выше не понятно что у Вас за модалки, когда Вы их хотите открывать... Ваш вопрос слишком общий. Вы или опишите все детали вопроса или идите на фриланс там Вам сделают

[NinjaSystems]

Andrey Suha, этот пример я понял. Я просил совета не как открыть модальное окно. Смотрите, если я к каждой модалке буду писать метод, то у меня получится 7 модалок и 7 методов. Вопрос как написать один метод который будет работать с каждой из 7 модалок. Они открываются по клику и имеют id test1, test2 и т. д. Понимаете мой вопрос?

[Andrey Suha]

NinjaSystems, видимо Вы не понимаете)) что бы ответить на Ваш вопрос нужно понимать как именно у Вас реализованы модалки, если это какая библиотека, то скажите какая, если сами писали, то код в студии

[NinjaSystems]

Andrey Suha, показываю код:

$(document).ready(function($) {
    $('.topmenu__auth-sighup').click(function() {
        $('.topmenu__modal-signup-fade').fadeIn();
        return false;
    });
});

[Andrey Suha]

NinjaSystems, как я понял .topmenu__modal-signup-fade это клас модалки, и у Вас есть ещё 6 таких же.

Тогда Ваш метод будет выглядеть примерно так

function openModal(modalClass) {
    $(modalClass).fadeIn();
}

Но его все так же нужно навесить на нажатие каждой кнопки которая вызывает модалку, если хотите совсем автоматизировать. То можно сделать так каждой кнопке которая вызывает модалку даёте класс например .call-modal
И добавляете дата атрибут с классом модалки которую кнопка будет вызывать

<button data-modal=".modal-class" class="call-modal">open</button>

Тогда

$('.call-modal').click(function() {
        let modalClass = $(this).data("modal")
        $(modalClass).fadeIn();
        return false;
    });

Как то так

[NinjaSystems]

Andrey Suha, вот спасибо! Очень помогли!

Answer 2

[Дмитрий]

Bootstrap 4 юзает вот такие окошки. Посмотри примеры.