Методы создания диалогового окна во всплывающем окне HTML

Существует несколько способов создания диалогового окна во всплывающем окне HTML. Вот некоторые из них:

  1. Использование функции alert()JavaScript. Самый простой способ создать диалоговое окно во всплывающем окне HTML — использовать функцию alert()в JavaScript. Эта функция отображает простое окно сообщения с кнопкой ОК.

Пример:

<script>
  alert("This is a dialog in an HTML popup!");
</script>
  1. Использование функции JavaScript confirm(): функция confirm()отображает диалоговое окно с сообщением и двумя кнопками, обычно «ОК» и «Отмена». Он возвращает логическое значение, указывающее, нажал ли пользователь «ОК» или «Отмена».

Пример:

<script>
  var result = confirm("Are you sure you want to proceed?");
  if (result) {
    // User clicked "OK"
  } else {
    // User clicked "Cancel"
  }
</script>
  1. Использование функции JavaScript prompt(): функция prompt()отображает диалоговое окно с сообщением, полем ввода и двумя кнопками, обычно «ОК». и «Отменить». Он возвращает значение, введенное пользователем, или ноль, если пользователь нажал «Отмена».

Пример:

<script>
  var name = prompt("Please enter your name:");
  if (name !== null) {
    // User entered a value
    alert("Hello, " + name + "!");
  } else {
    // User clicked "Cancel"
  }
</script>
  1. Использование библиотек CSS и JavaScript. Существуют различные библиотеки CSS и JavaScript, которые обеспечивают более настраиваемые и стильные диалоговые окна. Примеры: модальное окно Bootstrap, диалоговое окно пользовательского интерфейса jQuery и SweetAlert.

Пример использования модального окна Bootstrap:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
</head>
<body>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open Modal
  </button>
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Dialog Title</h4>
        </div>
        <div class="modal-body">
          This is a dialog in an HTML popup!
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>