Замена стандартного ALERT с помощью JQUERY
Как кастомизировать alert или замена стандартного alert на собственный.
Иногда бывает необходимо изменить дизайн стандартного alert`а в браузере и есть много способов как это можно сделать.
Самый простой способ, на мой взгляд, это создать функцию с именем alert, которая будет принимать необходимые данные и показывать, то окно, которое мы нарисуем.
Демонстрация.
Для данной реализации кроме библиотеки jQuery нам ничего не понадобиться.
Допустим у нас есть следующий код на JS:
Следующий html необходимо вставить в тело страницы, после body, он не должен находиться внутри каких-нибудь других div элементов.
Также CSS для нашего контейнера:
Иногда бывает необходимо изменить дизайн стандартного alert`а в браузере и есть много способов как это можно сделать.
Самый простой способ, на мой взгляд, это создать функцию с именем alert, которая будет принимать необходимые данные и показывать, то окно, которое мы нарисуем.
Демонстрация.
Для данной реализации кроме библиотеки jQuery нам ничего не понадобиться.
Допустим у нас есть следующий код на JS:
$(document).ready(function(){
// alert, который при загрузке страницы показывает сообщение,
// а также может быть, что на странице у нас много таких элементов
// и им всем необходимо изменить дизайн.
alert("Welcome!");
// Объявляем переменную с текстом для alert
// А также переменную для высоты документа
var alert_text = '';
var alert_height = '';
// Далее вводим функцию alert, которая заменит
// стандартный вывод окон на наш.
// Получаем текст для окна, а также открываем
// скрытый div с нашим дизайном для alert.
function alert(alert_text) {
$("#alert_dialog").show();
$("#alert_text").text(alert_text);
// Считаем высоту документа, для того, чтобы у нас туман
// закрывал все пространство документа, а не только какую-то
// его часть, и устанавливаем это значение для alert_fog.
alert_height = $(document).height();
$("#alert_fog").css('height', alert_height);
}
// По нажатию ОК - закрываем alert
$("#alert_close").click(function(){
$("#alert_dialog").hide();
});
});
Следующий html необходимо вставить в тело страницы, после body, он не должен находиться внутри каких-нибудь других div элементов.
<div id="alert_dialog" style="display:none;">
<div id="alert_fog"></div>
<div id="alert_body">
<span id="alert_text"></span>
<hr>
<span id="alert_button"><button id="alert_close">ОК</button></span>
</div>
</div>
Также CSS для нашего контейнера:
#alert_dialog {
z-index: 999;
width: 100%;
height: 100%;
position: absolute;
}
/* Здесь для IE 7 и 8 лучше вставлять полупрозрачный PNG,
а opacity убрать, т.к. эти браузеры это свойство не понимают. */
#alert_fog {
background: url("alert_fog.png") repeat scroll 50% 50% #666666;
opacity: 0.5;
z-index: 1000;
width: 100%;
height: 100%;
}
/* box-shadow и border-radius IE 7 и 8 не понмиают,
но это не испортит общей картины. */
#alert_body {
z-index: 1001;
width: 300px;
min-height: 100px;
position: absolute;
top: 300px;
left:50%;
background-color: #eeeeee;
border-radius: 8px;
margin-left:-150px;
padding: 15px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}
#alert_body hr {
border: 0;
margin: 0;
padding: 0;
height: 1px;
background: #DDDDDD;
}
#alert_text {
display: block;
min-height: 80px;
padding-bottom: 5px;
}
#alert_button {
display: block;
padding-top: 5px;
text-align: right;
}