TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як створити застереження, підказати, підтвердити діалогові вікна за допомогою JavaScript?

2

Діалогове вікно Створення попереджень за допомогою JavaScript

Діалогове вікно сповіщення-це спливаюче вікно, яке з’являється у веб-переглядачі лише за допомогою кнопки "OK", щоб повідомити користувачам про дуже маленьке повідомлення. Поле попередження повинно використовуватися для відображення попереджувального повідомлення або інформаційного повідомлення. Наприклад:

  • Вітальне повідомлення користувачеві при завантаженні сайту
  • Результат перевірки недійсного результату
  • Інформація про час простою сайту або час обслуговування.

Тут ми обговорюємо, як створити спливаюче вікно попередження за допомогою JavaScript з прикладом коду. Докладніше про створення сповіщень у Bootstrap 4.

Як це працює?

Функція JavaScript alert() спрацьовує, коли сценарій викликається на сторінці, яка відображатиме рядовий аргумент у спливаючому вікні сповіщення. Доки не надійде відповідь на вікно сповіщення, браузер не буде продовжувати завантажувати веб -сторінку.

Синтаксис

alert("Your Message Here");

Приклад

Нижче наведено приклад коду вікна попередження в JavaScript. Це вікно з’явиться, коли сторінка завантажиться як вікно привітання, і матиме можливість натиснути кнопку "OK" або закрити діалогове вікно у таких браузерах, як Google Chrome. Щойно користувач натисне «OK» (або закриє), зображення буде завантажено. Веб -переглядач припинить обробку сторінки до моменту відповіді на вікно попередження.

<HTML> <HEAD> <TITLE>ALERT BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> alert("Welcome to Our Website!!!"); document.write('<IMG SRC=""/>'); </SCRIPT> </BODY> </HTML>

Нижче наведено зображення вікна сповіщення у веб -переглядачі Chrome під час виконання вищевказаного коду.

Як створити застереження, підказати, підтвердити діалогові вікна за допомогою JavaScript?

Скринка попереджень JavaScript у Google Chrome

Створити діалогове вікно "Запит" за допомогою JavaScript

Діалогове вікно запиту використовується для відображення налаштованого виводу на веб -сторінці на основі даних користувача. На відміну від вікна оповіщення, яке використовується для відображення короткого повідомлення з однією кнопкою «OK», вікно підказки має такі функції:

  • Відображення заздалегідь визначеного повідомлення у вікні
  • Користувач може ввести введення в текстове поле
  • Введення користувача передається назад до сценарію
  • У вікні запиту є дві кнопки "OK" та "Скасувати"

Як це працює?

Вікно запиту також зупиняє завантаження веб -сторінки до моменту отримання відповіді від користувача. Йому потрібен наступний два набори інформації:

  • Повідомлення для відображення у вікні запиту
  • Текст за замовчуванням для відображення у текстовому полі – це необов’язково; Ви можете залишити текст за замовчуванням порожнім
  • Після натискання кнопки «OK» текст, введений у поле, передається сценарію
  • Після натискання кнопки «Скасувати» значення NULL передається сценарію назад

Синтаксис

prompt ("Message", "Default Value");

Приклад

prompt ("What is the color you like?", "Green");

Практичний приклад створення діалогового вікна "Запит" за допомогою JavaScript

Коробку підказок можна використовувати у багатьох практичних сценаріях, і одним із таких прикладів є привітання користувача разом із ім’ям. Наступний код запитує ім’я користувача під час завантаження сторінки, а потім додає ім’я з привітальним повідомленням, щоб відобразити його у браузері.

<HTML> <HEAD> <TITLE>PROMPT BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> document.write("<h1>Greetings</h1>"); document.write(prompt("Enter Your Name: ", "Name")); document.write(" Welcome to Our Site!</h1>"); </SCRIPT> </BODY> </HTML>

Як це виглядає?

Нижче наведено зображення вікна з підказкою у браузері Chrome під час виконання вищевказаного коду.

Як створити застереження, підказати, підтвердити діалогові вікна за допомогою JavaScript?

Коробка підказок JavaScript у Google Chrome

Коли користувач вводить ім’я та натискає кнопку «OK», ім’я передається сценарію, і всі повідомлення відображаються відповідно до функції document.write. Пусте місце у полі введення також вважається дійсним ім’ям у вікні запиту JavaScript.

Відображення вікна з іменем користувача

Коли користувач натискає кнопку «Скасувати», нульове значення передається і відображається у браузері замість імені.

Відображення вікна з нульовим значенням

Створити діалогове вікно підтвердження за допомогою JavaScript

Це третій тип діалогового вікна, що надається у JavaScript, окрім запитів та сповіщень. У цьому розділі пояснюється, як створити діалогове вікно підтвердження за допомогою JavaScript, яке використовується для підтвердження дій, зроблених користувачем.

Діалогове вікно "Підтвердити" має такі функції:

  • Попередньо визначене повідомлення, яке відображатиметься у вікні
  • Дві кнопки – OK і Скасувати

Як це працює?

Вікно підтвердження, як і інші діалогові вікна, також припиняє виконання, доки не буде отримана відповідь користувача. Дії користувача можуть бути або ОК, або Скасувати.

  • Значення true передається виклику програмі при натисканні кнопки OK
  • Значення false передається виклику програмі при натисканні кнопки «Скасувати»

Синтаксис

confirm ("Message");

Приклад

confirm ("Do you want to close this window?");

Практичний приклад

Наступний код JavaScript використовує метод підказки, щоб поставити запитання користувачеві. Відображається вікно підтвердження, яке показує правильну чи неправильну відповідь.

<HTML> <HEAD> <TITLE>CONFIRM BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> var q = "What is 5+5?"; var a = 10; var c = "<h2>You are a Genius</h2>"; var ic = "<h2>Reload to Try Again</h2>"; var response = prompt(q,"0"); if (response != a) { alert("Wrong, Better Luck Next Time!!!"); } else { alert("Correct! Well done!!!"); } var o = (response == a)? c: ic; document.write("<BR/>"); document.write(o); </SCRIPT> </BODY> </HTML>

Як це виглядає?

Нижче наведено зображення вікна підказки у веб -переглядачі Chrome під час виконання вищевказаного коду та відображення вікна підтвердження залежно від правильності відповіді, наданої у текстовому полі підказки.

Як створити застереження, підказати, підтвердити діалогові вікна за допомогою JavaScript?

JavaScript підтверджує правильну відповідь

Як створити застереження, підказати, підтвердити діалогові вікна за допомогою JavaScript?

JavaScript підтверджує неправильну відповідь

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі