01
Апр
2021

Помогите поправить JavaScript вызова Modal окон

Всем привет. Помогите исправить код. Изначально вместо div использовался noscript:

<noscript class="modal" name="ID Modal Окна">

Но понадобилось использовать Script внутри noscript, поэтому мне нужно заменить noscript на div. Чтобы было так:

<div class="modal" name="ID Modal Окна">

Но вся проблема что я не понимаю как можно в JS заменить noscript:

$(function() {
    $('[data-target]').click(function() {
        var modal = $(this).attr('data-target'),
            code = '<div class="modal" id="modal_' + modal + '">' + $('noscript[name="' + modal + '"]').html() + '</div>'; <--- Тут надо заменить noscript на div
        $('body').append(code);
        $('.modal [data-close]').click(function() {
            $(this).parents('.modal').remove();
        });
    });
});

Мне нужно чтобы id модального окна бралось из data-target и сравнивалось с атрибутом name

Вот код сейчас:

HTML:

<div class="modal" name="ID Modal Окна">
    <div class="modal-content">
          ...
    </div>
</div>

Как видно в name ID или имя модального окна. Вся суть такова что в JS не нужно указывать название модального окна. JS:

$(function() {
    $('[data-open-modal]').click(function() {
        var modal = $(this).attr('data-open-modal'),
            code = '<div class="modal-active" id="modal_' + modal + '">' + $('div[name="' + modal + '"]').html() + '</div>';
        $('body').append(code);
        $('.modal [data-close]').click(function() {
            $(this).parents('.modal-active').remove();
        });
    });
});

CSS:


.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    overflow: auto;
    background-color: rgba(19, 22, 27, .6);
    width: 100%;
    height: 100%;
}


/* Modal Content/Box */

.modal-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: relative;
}

Как я понимаю теперь нужно сделать чтобы добавлялся класс modal-active с display:block;, но как это сделать не понимаю.

Источник: https://ru.stackoverflow.com/questions/1264941/%D0%9F%D0%BE%D0%BC%D0%BE%D0%B3%D0%B8%D1%82%D0%B5-%D0%BF%D0%BE%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D1%82%D1%8C-javascript-%D0%B2%D1%8B%D0%B7%D0%BE%D0%B2%D0%B0-modal-%D0%BE%D0%BA%D0%BE%D0%BD

Тебе может это понравится...

Добавить комментарий