Всем привет. Помогите исправить код. Изначально вместо 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;, но как это сделать не понимаю.
Свежие комментарии