confirm()

Функция придёт на помощь когда лень делать красивое модальное окно.

Время чтения: меньше 5 мин

Кратко

Скопировано

При помощи функции confirm() можно вывести на экран пользователя модальное окно с текстом и кнопками «Ок» и «Отмена».

Пример

Скопировано
Открыть демо в новой вкладке

💡 Это крайне быстрый вариант кода, который взаимодействует с пользователем, но окно созданное таким образом не изменяется через CSS, а значит использовать его лучше только для прототипирования интерфейса. В финальном варианте веб-страницы использовать модальное окно нежелательно.

Как пишется

Скопировано

confirm() принимает один аргумент — это текст, который появится в модальном окне.

Результат работы confirm() можно записать в переменную:

        
          
          var answer1 = confirm('Подтвердите удаление')
          var answer1 = confirm('Подтвердите удаление')

        
        
          
        
      

Если не передать никакие аргументы, то пользователь увидит просто пустое окно с кнопками. Если появление окна следовало из какого-то действия, то пользователь может догадаться, что от него хотят. Но лучше, чтобы текст в модальном окне был написан — не надо бесить пользователей.

Как понять

Скопировано

Аргумент для confirm() должен быть строкой. Если это не так, то JavaScript автоматически приведёт его к строке. Такое поведение не доставляет проблем, пока аргумент является примитивом или встроенным типом, имеющим правила приведения к строке. Если же в функцию передать объект, то получится непонятно:

        
          
          confirm('Подтвердите переход на страницу')// Текст: 'Подтвердите переход на страницу'confirm({ message: 'Подтвердите переход' })// '[object Object]'
          confirm('Подтвердите переход на страницу')
// Текст: 'Подтвердите переход на страницу'

confirm({ message: 'Подтвердите переход' })
// '[object Object]'

        
        
          
        
      

💡 Результат вызова confirm() — булево значение: true если нажать «Окей» и false если нажать «Отмена».

        
          
          var result = confirm('Удалить элемент?')if (result) {  alert('Элемент удален!')} else {  alert('Операция прервана')}
          var result = confirm('Удалить элемент?')

if (result) {
  alert('Элемент удален!')
} else {
  alert('Операция прервана')
}

        
        
          
        
      
Открыть демо в новой вкладке

На практике

Скопировано