Open kkovalev opened 5 years ago
с JQ Верстка модалки $('body').append('<div id="compareLog" class="modalbackground"><div class="modalwindow"><a href="#">Закрыть</a></div></div>');
$('body').append('<div id="compareLog" class="modalbackground"><div class="modalwindow"><a href="#">Закрыть</a></div></div>');
Стили/Логика
$('body').append(`<style>.modalbackground { margin: 0; /* убираем отступы */ padding: 0; /* убираем отступы */ position: absolute; /* фиксируем положение */ top:0; /* растягиваем блок по всему экрану */ bottom:0; left:0; right:0; background: rgba(0,0,0,0.5); /* полупрозрачный цвет фона */ z-index:100; /* выводим фон поверх всех слоев на странице браузера */ opacity:0; /* Делаем невидимым */ pointer-events: none; /* элемент невидим для событий мыши */ } /* при отображении модального окно - именно здесь начинается магия */ .modalbackground:target { opacity: 1; /* делаем окно видимым */ pointer-events: auto; /* элемент видим для событий мыши */ } /* ширина диалогового окна и его отступы от экрана */ .modalwindow { text-align: center; width: 100%; max-width: 90%; margin: 10% auto; padding: 2%; background: #fff; border-radius: 3px; } .modalwindow table{ margin: auto; } /* настройка заголовка */ .modalwindow h3 { padding: 10px; margin: 0; } /* оформление сообщение */ .modalwindow p { padding: 0; margin: 4% 0 8% 0; } /* вид кнопки ЗАКРЫТЬ */ .modalwindow a { display: block; color: #fff; background: #369; padding: 2%; margin: 0 auto; width: 50%; border-radius: 3px; text-align: center; text-decoration: none; } /* вид кнопки ЗАКРЫТЬ при наведении на нее мыши */ .modalwindow a:hover { background: #47a; } .compare{ max-width: 200px; } </style> `);
<a href="#compareLog" onClick="$('#compareLog .modalwindow').html('Сообщение!');">Открыть модалку</a>
Возможно, как вариант при наличии жквери покатит, если во вменяемый вид привести сниппет.
Не очень понял, как показать эту модалку по событию (например, ответ сервера за запрос: ok/error)
с JQ Верстка модалки
$('body').append('<div id="compareLog" class="modalbackground"><div class="modalwindow"><a href="#">Закрыть</a></div></div>');
Стили/Логика
<a href="#compareLog" onClick="$('#compareLog .modalwindow').html('Сообщение!');">Открыть модалку</a>