29 февраля 2012 HTML CSS jQuery

Замена стандартного ALERT с помощью JQUERY

Как кастомизировать alert или замена стандартного alert на собственный.

Иногда бывает необходимо изменить дизайн стандартного 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;
```
```
}
```

Поделиться в социальных сетях