Easy-to-use Алерт

[kkovalev]

No description provided.

[timkovik]

с JQ
Верстка модалки
$('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>

[kkovalev]

Возможно, как вариант при наличии жквери покатит, если во вменяемый вид привести сниппет.

[kkovalev]

Не очень понял, как показать эту модалку по событию (например, ответ сервера за запрос: ok/error)