Взаимодействие: alert, prompt, confirm

Так как мы будем использовать браузер как демо-среду, нам нужно познакомиться с несколькими функциями его интерфейса, а именно: alert , prompt и confirm .

alert

С этой функцией мы уже знакомы. Она показывает сообщение и ждёт, пока пользователь нажмёт кнопку «ОК».

Это небольшое окно с сообщением называется модальным окном. Понятие модальное означает, что пользователь не может взаимодействовать с интерфейсом остальной части страницы, нажимать на другие кнопки и т.д. до тех пор, пока взаимодействует с окном. В данном случае – пока не будет нажата кнопка «OK».

prompt

Функция prompt принимает два аргумента:

Этот код отобразит модальное окно с текстом, полем для ввода текста и кнопками OK/Отмена.

title Текст для отображения в окне. default Необязательный второй параметр, который устанавливает начальное значение в поле для текста в окне.

Квадратные скобки вокруг default в описанном выше синтаксисе означают, что параметр факультативный, необязательный.

Пользователь может напечатать что-либо в поле ввода и нажать OK. Введённый текст будет присвоен переменной result . Пользователь также может отменить ввод нажатием на кнопку «Отмена» или нажав на клавишу Esc . В этом случае значением result станет null .

Вызов prompt возвращает текст, указанный в поле для ввода, или null , если ввод отменён пользователем.

Второй параметр является необязательным, но если не указать его, то Internet Explorer вставит строку «undefined» в поле для ввода.

Запустите код в Internet Explorer и посмотрите на результат:

Чтобы prompt хорошо выглядел в IE, рекомендуется всегда указывать второй параметр:

confirm

Функция confirm отображает модальное окно с текстом вопроса question и двумя кнопками: OK и Отмена.

Результат – true , если нажата кнопка OK. В других случаях – false .

Итого

Мы рассмотрели 3 функции браузера для взаимодействия с пользователем:

alert показывает сообщение. prompt показывает сообщение и запрашивает ввод текста от пользователя. Возвращает напечатанный в поле ввода текст или null , если была нажата кнопка «Отмена» или Esc с клавиатуры. confirm показывает сообщение и ждёт, пока пользователь нажмёт OK или Отмена. Возвращает true , если нажата OK, и false , если нажата кнопка «Отмена» или Esc с клавиатуры.

Все эти методы являются модальными: останавливают выполнение скриптов и не позволяют пользователю взаимодействовать с остальной частью страницы до тех пор, пока окно не будет закрыто.

На все указанные методы распространяются два ограничения:

1. Расположение окон определяется браузером. Обычно окна находятся в центре.
2. Визуальное отображение окон зависит от браузера, и мы не можем изменить их вид.

Такова цена простоты. Есть другие способы показать более приятные глазу окна с богатой функциональностью для взаимодействия с пользователем, но если «навороты» не имеют значения, то данные методы работают отлично.

Замена стандартного alert на стильный с html содержимым

В коде часто требуется использовать стандартные всплывайки типа alert(). Хотя браузеры и постарались их стилизовать, но внешний вид оставляет желать лучшего. К тому стиль алертов отображается по разному в зависимости от типа браузера и стандартным css его никак не изменить. Как быть в такой ситуации?

Для этого можно написать небольшой скрипт, который автоматом заменит стиль всех стандартных alert-ов на вашем сайте. Таким образом, на всех браузерах всплывайки будут показываться в тон вашего сайта и с общим стилем. Звучит неплохо.

Но и это еще не все! В такие alert-ы можно будет легко вставлять любой html код начиная от ссылок и тегов форматирования, заканчивая картинками с видео фрэймами от YouTube. Из-за чего отпадает надобность в подключении или разработки сложных зачастую перегруженных скриптов модальных окон.

Код js и css имеет минимум строк. За счет стилей вы сможете легко поменять внешний вид alert-ов по своему усмотрению. На одной странице можно использовать бесконечно много вызовов таких всплываек. Делается это так:

Для вызова всплываек посложнее я предусмотрел поле заголовка и самого текста:

И естественно, всплывайки можно назначить на onclick событие:

В скачанном коде вы найдете все эти примеры. Единственным недостатком такого alert-а для меня является отключение обновления страницы до того, пока пользователь не нажмет Ok в такой комбинации: alert(‘Вы будете переадресованы’); window.location = ‘/’; Т.е. в стандартной ситуации, страница бы не переадресовалась, пока мы бы не нажали Ok, а с этим alert-ом, она сразу переадресуется. Но в целом такая вещь нужна только программистом. Поэтому решением может быть обычное переименование function alert() в function alert_msg() и использование наименование последней функции для красивый alert-ов, а обычных — для системных сообщений.

Спасибо все работает, только не получается сделать адаптивным под мобильные устройства

W3.CSS Alerts

The w3-panel class is the perfect class to display all types of alerts:

Danger!

Red often indicates a dangerous or negative situation.

Alerts are often displayed using a strong color:

Danger!

Red often indicates a dangerous or negative situation.

Example

Danger!

Red often indicates a dangerous or negative situation.

Display Warnings

Warning!

Yellow often indicates a warning that might need attention.

Warning!

Yellow often indicates a warning that might need attention.

Example

Warning!

Yellow often indicates a warning that might need attention.

Display Successs

Success!

Green often indicates something successful or positive.

Success!

Green often indicates something successful or positive.

Example

Success!

Green often indicates something successful or positive.

Display Information

Blue often indicates a neutral informative change or action.

Blue often indicates a neutral informative change or action.

Example

Information!

Blue often indicates a neutral informative change or action.

Using a Container

The w3-container class can also be used to display alerts:

Example

Danger!

Red often indicates a dangerous or negative situation.

Alerts in All Colors

Alerts are often displayed in special colors, but any color can be used:

Danger!

Red often indicates a dangerous or negative situation.

Danger!

Red often indicates a dangerous or negative situation.

Danger!

Red often indicates a dangerous or negative situation.

Danger!

Red often indicates a dangerous or negative situation.

Danger!

Red often indicates a dangerous or negative situation.

Example

Danger!

Red often indicates a dangerous or negative situation.

Closing Alerts

To close the alert box, click on the X in the upper right corner:

Danger!

Red often indicates a dangerous or negative situation.

To create the X that closes the alert, add a element with class w3-button and an onclick event:

Example

Tip: The HTML × entity is the preferred icon for close buttons (rather than the letter «X»).

Rounded Alerts

Use the w3-round classes if you want rounded corners:

Success!

Here w3-round is used.

Success!

Here w3-round-large is used.

Success!

Here w3-round-xxlarge is used.

Example

Alert as a Card

Use a w3-card class if you want the alert to be displayed as a card:

Warning!

Yellow often indicates something that needs attention.

Example

COLOR PICKER

LIKE US

Get certified
by completing
a course today!

CODE GAME

Certificates

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Web Courses

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Форум

Справочник

alert

Синтаксис

Аргументы

Описание, примеры

Выводит модальное окно с сообщением. Посетитель не сможет продолжить работу, пока не нажмет на кнопку «ОК» в модальном окне.

Q: Как показать возврат каретки?
A: \n. А не и не . Пример:
alert(‘Первая строка\nВторая строка’);
Проверено на FireFox, iTouch.

Что значит : «Как показать возврат каретки?».
Лучше показать, как расречатать в две строки .

Вообще-то Хаим Фридланд под возвратом каретки и имеет в виду перепрыг на следущую строку.
Это не совсем корректно т.к. есть в ASCII коде возвратом каретки считается непечатаемый символ с названием «BS» и имеет он несколько другую функцию: печатает следущий поверх предидущего т.е.
1)а + BS + ‘ (только в двоичной коде к примеру txt файла) будет отображаться Usery как символ á
2)a + BS + а (пояснения аналогично) у пользователя отобразится a жирным ну или полу жирным (кому как нравится).

> Это не совсем корректно т.к. есть в ASCII коде возвратом каретки считается
> непечатаемый символ с названием «BS» и имеет он несколько другую функцию

сорри, что это за бред?
BS (код 8) — это back space

Возврат каретки — это CR (carriage return, код 13 или 0xD)

Возврат каретки технически на старых ЭВМ осуществлял возврат печатающей головки (печатающая головка прикручивалась к каретке, которая ездила по направляющим, как сейчас держак картриджей в струйниках) на начало строки (без перехода на новую строку). За переход на новую строку (прокрутка барабана с бумагой) отвечал другой символ с кодом 0x0A.
Винда унаследовала этот анахронизм аналоговых устройств, в ANSI за переход на новую строку отвечает сочитание символов 0x0D0A. Unix-системы появились уже тогда, когда результаты работы программ выводились не на принтер, а на экран, да и принтеры поумнели, отпала необходимость в двух символах.
В макинтошевской кодировке вроде тоже 2 символа, но другая очерёдность — сначала прокручивается барабан, а потом возвращается каретка — 0x0A0D (но 100% не гарантирую, инфу получил лет 15 назад).

OMFG, какой еще барабан на макинтошах
0x0A0D это тоже самое, что и 0x0D0A, только в Big Endian. Кстати мак или не мак значения не имеет. Имеет значения что за процессор. Раньше на маках был процессор PowerPC, который исполняет байтики в очередности Big Endian. В современных маках интелловские Little Endian процессоры.

в chrome так не работает..какие еще есть варианты?

Спасибо, не знал) Я испробовал все буквы, тот же результат ещё от буквы «r». Некоторые текст изменяли внешне. Можешь поподробнее про это написать?)

Добрый день! У меня такой вопрос. Захожу на сайт через мини оперу и не могу играть в игры, нажимаю на окно, высвечивается jаvаsсriрt аlеrt деактевируйте всплывающие окна, как это сделать?

А есть ли у javascript функция наподобие этой, которая принимала бы в качестве параметра и заголовок окошка сообщения (и возможно даже могла бы менять эконку в этом диалоге)?

«//-оформление можешь сделать свое — если надо у меня есть готовое окно как в системе — неотличишь!»
Выкладывай, буду признателен

Помогите бедному студенту зделать лабу .
С java познакомился 2дня назад(( И не успел розобраться .
Створити форму для введення 6 чисел та вивести назву відповідного завдання.
1) Обчислиити суму перших чотирьох від’ємних елементів.

подскажите можноь ли перевести деньги с Алерта деньги на Perfect Money?

Ребята, а можно методу alert задать «сценарий», чтоб при нажатии на «ОК» в модально окне, зарылось и родительское окно браузера?

почему у меня в браузере не работает alert
браузеры фф и хром

Что надо написать, чтобы яваскрипт работал?

При обычном алерте действие скриптов останавливается (+в хроме вкладка переключается на ту, где вызван алерт). При стилизации окна не могу повторить то же повдение( Может кто знает как это повторить?

Пример кода
// Выводит всплывающее окно заданного типа

window.alert=function(text, mtype) <
// устанавливаем сообщение
$(‘._alert’).html(text);
// указываем тип сообщения (стиль окна)
$(‘._alert’).attr(«className», «_alert » + mtype);
// выводим окно
$(‘#dialog’).dialog( <
modal: true,
width: 350,
minHeight: 80,
buttons: <
«Закрыть»: function() <
$(this).dialog(«close»);
>
>
>);
>

А не мог бы ты написать полный код с html, пожалуйста, а то я что-то не совсем понял)

Надо поместить скрипт в функцию — типа вот так:

function mojafunctia() <
Этот скрипт
>

Спасибо , всё очень здо’рого и всё так же непонятно .

может кто знает как браузеру сообщить о том что на этом сайте отключить чек бокс «Остановить выполнение сценариев для данной страницы»?

Не получится. Если этот флажок можно отключить, его смысл теряется. Зачем мучать пользователя этими алертами?

а можно по алерту запустить блок функций? Чтобы выполнилась серия команд?

Вот тебе и серия команд

А как сделать у себя на сайте, чтоб когда заходишь на сайт выводилось окно типа «дынный сайт работает не корректно в браузере IE», нажимаешь ок и окно больше чтоб не появлялась, за счет алерта или каким либо другим способом

JS выполняется по мере загрузки страницы. Т.е. когда браузер читает HTML и находит скрипт в body, то он сначала выполнит его, а затем продолжит загрузку страницы:

ALERT и Чекбоксы:

Данный скрипт выведет TRUE!, эсли чекбокс будет отмечен.

А можно как-то в предыдущем коде заменить алерты (alert) с помощю замены функции? Ну пишем кнопку что деляет это:

Одной вещи тут не понимаю: замена кода вроди происходит, но при вызове — функция isseter() выполняется старая. Почему? Как сделать правильно?

Такой вопрос.
Поставил на сайт вот такой код:

Вместо кнопки я сделал другую картинку.
При нажатие на эту картинку у меня открывается окошко, но после его закрытия у меня страница обновляется. А мне её обновлять не надо.
Как решить эту проблему?

Подскажите а как заменить всплывающие окна alert на так чтобы прописывало на самой странице ввиде message?

Было бы неплохо добавить сюда более глубокою информацию.
Например мне не понятно как алерт обновляет контент страницы. Я в джава скрипте подгружаю картинку, и информация о её размере появляется только если юзать алерт в скрипте перед запросом размера, или же (вообще страшно) — если дважды кликать на кнопку что запускает скрипт.

var n=0
var sum=parseInt(prompt(«Сумма вклада?»));
var years=parseInt(prompt(«Количество лет вклада?»));
var proc=parseInt(prompt(«Какая процентная ставка?»));
for (n=0; n

почему в конце алерт не работает?

помогите плиз!
Как в модальное окно alert(message) добавить несколько кнопок с сылками?