Стилизованный alert

Стилизованный alert() это просто!

Данные для заголовка и контента стилизованного алерта берутся из атрибутов data-* или из одноименных элементов объекта.

Пример использования

Код для реализации

Первое - добавляем HTML, либо с атрибутами data-*, либо с onclick'ом

<div id="al1" class="button buttonNoClick" data-alert-title="data-alert-title" data-alert-content="data-alert-content" >alert с атрибутами data-*</div>
<div class="button" onclick="Alert({alertTitleText:'Alert!', alertContentText:'Это alert Content!'});">alert без атрибутов data-*, но с onclick'ом</div>

Теперь CSS, чтоб выглядело все интереснне, чем то, что по умолчанию

/* Кнопки */
.button{
    padding: 5px 8px;
    border-radius: 4px;
    color: #ffffff;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-family: Arial;
    background: #9b9b9b; /* Old browsers */
    background: -moz-linear-gradient(top, #9b9b9b 0%, #e2e2e2 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #9b9b9b 0%,#e2e2e2 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #9b9b9b 0%,#e2e2e2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9b9b9b', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9 */
}
.button:hover,
.button:active{
    color: #000;
    background: #76ab3b; /* Old browsers */
    background: -moz-linear-gradient(top,  #76ab3b 0%, #abde62 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #76ab3b 0%,#abde62 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #76ab3b 0%,#abde62 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76ab3b', endColorstr='#abde62',GradientType=0 ); /* IE6-9 */
}
/*Блок на весь экран*/
.alertOverlay{
    width:100%;
    height:100%;
    position:fixed;
    left:0px;
    top:0px;
    z-index:55;
    background:#333;
    opacity:.7;
}
/*Сам блок с текстом и ссылками*/
.alertBlock{
    min-width:250px;
    max-width: 850px;
    background:#fff;
    position:fixed;
    left:50%;
    top:50%;
    z-index:56;
    text-align: left;
    display:none;
}
/*Заголовок блока*/
.alertTitle{
    padding:0px 15px;
    height: 30px;
    line-height: 30px;
    background: #f0f0f0; /* Old browsers */
    background: -moz-linear-gradient(top, #f0f0f0 0%, #c8d0d2 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f0f0f0 0%,#c8d0d2 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f0f0f0 0%,#c8d0d2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#c8d0d2',GradientType=0 ); /* IE6-9 */
}
/*Текст, который будет под заголовком*/
.alertContent{
    padding:10px 15px 5px 15px;
    color:#333;
    font-size:12px;
    font-family: Arial;
}
/* Блок с кнопками */
.alertButtons{
    padding: 10px 0;
    text-align: center;
}
/*Вид ссылок в тексте*/
.alertContent a{
    color:#333;
}
/*Вид ссылок в тексте при наведении*/
.alertContent a:hover,
.alertContent a:active{
    text-decoration:none;
    color:#ed1e79;
}
div.alertClose{
    width: 20px;
    height: 20px;
    line-height: 20px;
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 0;
    margin: 0;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    background: transparent;
}
div.alertClose::after{
    content: '\2716';
}
div.alertClose:hover::after {
    color:#ff0000;
}

Теперь Javascript, чтоб все заработало

function Alert(obj) {

    if ( !!obj.tagName ) {
        var alertTitleText = obj.getAttribute('data-alert-title') || '';
        var alertContentText = obj.getAttribute('data-alert-content') || '';
    } else {
        var alertTitleText = obj.alertTitleText || '';
        var alertContentText = obj.alertContentText || '';
    }

    var idNum = new Date().getMilliseconds();
    var alertOverlay = document.createElement('div');
    alertOverlay.setAttribute('class','alertOverlay');
    alertOverlay.setAttribute('id','alertOverlayId' + idNum);

    var alertBlock = document.createElement('div');
    alertBlock.setAttribute('class','alertBlock');
    alertBlock.setAttribute('id','alertBlockId' + idNum);

    var alertTitle = document.createElement('div');
    alertTitle.setAttribute('class','alertTitle');
    alertTitle.innerHTML = alertTitleText;

    var alertContent = document.createElement('div');
    alertContent.setAttribute('class','alertContent');
    alertContent.innerHTML = alertContentText;

    var alertButtons = document.createElement('div');
    alertButtons.setAttribute('class','alertButtons');

    var alertOk = document.createElement('div');
    alertOk.setAttribute('class','button');
    alertOk.innerHTML = 'OK';
    alertOk.addEventListener('click',hideAlert);

    var alertClose = document.createElement('div');
    alertClose.setAttribute('class','alertClose alertCloseButton');
    alertClose.setAttribute('id','alertCloseId' + idNum);
    alertClose.addEventListener('click',hideAlert);

    alertBlock.appendChild(alertTitle);
    alertBlock.appendChild(alertContent);
    alertBlock.appendChild(alertButtons);
    alertButtons.appendChild(alertOk);
    alertBlock.appendChild(alertClose);

    document.body.appendChild(alertOverlay);
    document.body.appendChild(alertBlock);

    alertOverlay.style.display = 'block';
    alertBlock.style.display = 'block';

    function hideAlert(){
        // hide
        document.getElementById('alertOverlayId'+idNum).style.display = 'none';
        document.getElementById('alertBlockId'+idNum).style.display = 'none';

        // remove
        document.getElementById('alertOverlayId'+idNum).remove();
        document.getElementById('alertBlockId'+idNum).remove();
    };

};

Вызывать можно разными способами - onclick в самом HTML, добавляя onclick через Javascript или просто вызывая конструктор.

(function(){

    var buttons = document.getElementsByClassName('buttonNoClick');
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', function(){
            var newAlert = new Alert(this);
        });
    };

}());