Гарний Alert Box на MooTools
Sexy Alert Box — імітація класичного Alert-вікна, що використовується в JavaScript; красивий і корисний скрипт, який можна використовувати для показу попередження, форм логування чи реєстрації, для повідомлення про помилку: незаповнені чи неправильно заповнені поля, тощо.
Sexy Alert Box дає можливість контролювати, як свій зовнішній вигляд, так і оформлення контенту, що знаходиться в ньому. Якщо ви хочете змінити простий стиль Alert-вікна на красивий та функціональний, то ця стаття для вас! Щоб зрозуміти повніше про що йде мова, дивіться демонстраційні приклади.
Рис.1. Скріншот Sexy Alert Box
Як Використовувати Sexy Alert Box?
На жаль, на сторінці Sexy Alert Box інструкції по встановленні на іспанській мові (на жаль, звичайно, для тих, хто її не знає). Але, якщо ви хоча б мінімально розбираєтесь в JavaScript, то зможе самостійно прикрутити даний ефект на власний сайт без зайвих проблем. Для решти ж читачів внизу наводяться нескладні кроки по інсталяції Sexy Alert Box.
1. Завантажте Mootools і Sexy AlertBox JS файли.
2. Вставте цей код десь між теґи <head>…</head>:
<script src="mootools.js" type="text/javascript"></script>
<script src="sexyalertbox.v1.js" type="text/javascript"></script>
<link rel="stylesheet" href="sexyalertbox.css" type="text/css" media="all" />3. Вставте наступний код між теґи <body>…</body>:
<script type="text/javascript">
window.addEvent('domready', function() {
Sexy = new SexyAlertBox();
});
</script>4. Щоб показати Sexy Alert повідомлення, вам потрібно додати цей простий код там, де ви хочете показати посилання на його активацію:
... тут може бути ваш текст
<a href="#" onclick="Sexy.alert('Привіт!'); return false;">Привіт, світ!</a>
далі ще якийсь текст...
В результаті Alert-вікно з’являтиметься поверх всіх елементів веб-сторінки, а ця поява супроводжуватиметься красивою анімацією.
Щоб змінити вигляд вашого Sexy Alert вікна, спробуйте поекспериментувати з sexyalertbox.css файлом. Якщо ви хочете знати, як використовувати розширені функції, то читайте документацію (іспанською мовою).
Про Sexy Alert Box також пишуть:
- Sexy Alert Box [JS] (російською мовою).
- Design a stunning Alert Box using MooTools (англійською мовою).