Как выводить блок при нажатии на кнопку(модальное окно)?

Question

[nagge101]

Представляю код, а потом уже и что нужно:

<a href="#" id="block1" class="block-btn" style="top: 32px; left: 593px;"></a>
    <div class="hide-block" data-block-visible="block1" style="top: 20px; left: 447px;">
        <button class="custom-close"></button>
    </div>

И так, нужно чтобы при нажатии на ссылку по id находился блок с data-block-visible и соответственно выводил его, дальше подумаю как, либо fadeIn, либо же добавлением класса, это сам модифицирую. И чтобы по нажатии на кнопку окно пропадало. Окон таких будет несколько и желательно, чтобы не было конфликта в закрывании.

Answer 1

[nagge101]

Накостылял и все работает:

$(document).on('click', '.block-btn', function(e) {
    e.preventDefault();
    var id = $(this).attr('id');
    var block = $('div[data-block-visible="' + id + '"]');
    block.toggleClass('active');
});
$(document).on('click', '.custom-close', function(e) {
    e.preventDefault();
    var id = $(this).attr('data-block-visibled');
    var block = $('div[data-block-visible="' + id + '"]');
    block.removeClass('active');
});

Answer 2

[Максим Тимофеев]

1. Слушаем событие клика по кнопке, подробнее тут:
https://jquery-docs.ru/category/events/
https://learn.javascript.ru/introduction-browser-events
2. Выводим блок. Тут уже вариантов масса, проще всего методы hide и show, подробнее тут:
https://www.w3schools.com/jQuery/jquery_hide_show.asp

Не понимаю в чем у Вас проблемы, любой учебник содержит эту инфу в самом начале, да и поиск выдает миллионы гайдов. Вы или забыли почить хоть что-нибудь или не верно сформулировали вопрос.

Comments

[nagge101]

Появление ясно как делается. Главная суть вопроса, чтобы была выборка т.к. на странице таких много элементов и чтобы открывался именно тот, что нужно. Не зря же написал, что по атрибуту

[Максим Тимофеев]

nagge101, ну так раз есть id или другой уникальный атрибут, то по нему и открываете, не понимаю в чем проблема. только id надо не кнопке задавать, а блоку, так как он уникален, а кнопок может быть миллион.
Посмотрите как это сделано у того же bootstrap:
https://getbootstrap.com/docs/4.1/components/modal/
у блока id у кнопки 2 дата атрибута, 1 для отслеживания клика по нему, второй для хранения селектора блока который надо открыть.