Стандартный диалог alert не больно уж симпатично выглядит, да и изменить его вид не представляет возможности. Так что если вы захотите заменить его на что-нибудь более приглядное, то при помощи YUI и диалога SimpleDialog это сделать очень просто. Вот как это будет выглядеть:
Идею я позаимствовал у Asvin Baloo и несколько переделал реализацию. Суть метода заключается в том, что стандартная функция alert переопределяется с использованием диалога SimpleDialog из состава YUI:
window.alert = function(text) {
var dialog = new YAHOO.widget.SimpleDialog("simpledialog1",
{ width: "300px",
fixedcenter: true,
visible: false,
draggable: false,
zIndex: 9999,
icon: YAHOO.widget.SimpleDialog.ICON_INFO,
close: true,
modal: true,
constraintoviewport: true,
buttons: [{ text:"Закрыть", handler: function(){this.hide()}, isDefault:true }]
});
dialog.setBody(text);
dialog.setHeader('Информация');
dialog.render(document.body);
dialog.show();
}
В результате такого переопределения, при вызове функции alert будет вызываться диалоговое окно, показанное выше, с заголовком, иконкой и кнопкой “закрыть”. Все это естественно настраивается. При создании окна указываем параметр modal равным true для того, чтобы диалог был модальным, как и стандартный alert.
Дабы далее расширить функциональность, можно помимо функции alert() создать функции success() и warning(), которые выводили бы сообщения об успехе или предупреждение. Реализация всех фунций показана в следующем блоке:
window.alert = function(text){
popUpDialog(text);
};
window.success = function(text){
popUpDialog(text, 2);
}
window.warning = function(text){
popUpDialog(text, 1);
}
function popUpDialog(text, type){
var sIcon = YAHOO.widget.SimpleDialog.ICON_BLOCK;
var title = 'Ошибка';
switch (type){
case 1:
sIcon = YAHOO.widget.SimpleDialog.ICON_WARN;
title = 'Предупреждение';
break;
case 2:
sIcon = YAHOO.widget.SimpleDialog.ICON_INFO;
title = 'Информация';
}
var dialog = new YAHOO.widget.SimpleDialog("simpledialog1",
{ width: "300px",
fixedcenter: true,
visible: false,
draggable: false,
zIndex: 9999,
icon:sIcon,
close: true,
modal: true,
constraintoviewport: true,
buttons: [{ text:"Закрыть", handler: function(){this.hide()}, isDefault:true }]
});
dialog.setBody(text);
dialog.setHeader(title);
dialog.render(document.body);
dialog.show();
}
Здесь, создание диалогового окна вынесено в отдельную функцию popUpDialog(), где первым параметром передается строка сообщения, а вторым его тип. В зависимости от типа окна, устанавливаются два параметра - иконка и текст заголовка, которые после используются для создания диалогового окна. Далее создаются три функции alert(), success() и warning(), которые просто вызывают popUpDialog() с нужными параметрами.