jQuery Alert Dialogs — замена стандартным функциям Alert(), Confirm() и Prompt()

Плагин jQuery Alert Dialogs призван заменить основную функциональность стандартных предупреждений JavaScript, alert(), confirm(), и prompt() функций. Они полностью настраиваются с помощью CSS (это позволит выглядеть вашему сайту гораздо более привлекательно). И вы также можете настроить пользовательский заголовок для каждого диалогового окна.

Эти методы моделируют обычные модальные диалоговые окна. Они автоматически изменяют свое положение при изменении окна браузера. Если включить jQuery UI Draggable плагин, то окна можно перемещать, перетаскивая их за заголовки. В отличие от стандартных JavaScript функций, вы можете использовать HTML в сообщении. Например, чтобы задать переход на новую строку, вы можете использовать либо \n, либо < br / >.

Для работы плагина необходимы следующие скрипты:





< link href="/path/to/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

Вызываются функции следующим образом:

* jAlert(message, [title, callback])
* jConfirm(message, [title, callback])
* jPrompt(message, [value, title, callback])

Пример кода:

1. <script type="text/javascript">
2. $(document).ready( function() {
3. $("#alert_button").click( function() {
4. jAlert('This is a custom alert box', 'Alert Dialog');
5. });
6. $("#confirm_button").click( function() {
7. jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
8. jAlert('Confirmed: ' + r, 'Confirmation Results');
9. });
10. });
11. $("#prompt_button").click( function() {
12. jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
13. if( r ) alert('You entered ' + r);
14. });
15. });
16. $("#alert_button_with_html").click( function() {
17. jAlert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <u>underline</u>!');
18. });
19. $(".alert_style_example").click( function() {
20. $.alerts.dialogClass = $(this).attr('id'); // set custom style class
21. jAlert('This is the custom class called &ldquo;style_1&rdquo;', 'Custom Styles', function() {
22. $.alerts.dialogClass = null; // reset to default
23. });
24. });
25. });
26. </script>

* This source code was highlighted with Source Code Highlighter.

Недостатки:
* Клавиши ENTER и ESC (подтвердить/отменить) не работают в WebKit-браузерах
* Draggable plugin на данный момент не работает в Opera
* В IE6 position: fixed не поддерживается.

Демонстрация.