Как сделать диалоговое окно на javascript, типа alert()?

Пользователь

от gage , в категории: JavaScript , год назад

Как сделать диалоговое окно на javascript, типа alert()?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от stephon , год назад

@gage 

Вот пример создания диалогового окна на JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
function showDialog(message) {
  var dialog = document.createElement('div');
  dialog.innerHTML = message;
  dialog.style.position = 'fixed';
  dialog.style.top = '50%';
  dialog.style.left = '50%';
  dialog.style.transform = 'translate(-50%, -50%)';
  dialog.style.padding = '16px';
  dialog.style.backgroundColor = '#ffffff';
  dialog.style.border = '1px solid #000000';
  dialog.style.boxShadow = '0px 0px 10px #000000';
  dialog.style.zIndex = '99999';
  document.body.appendChild(dialog);
}


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

1
showDialog('Привет, это моё диалоговое окно!');


Это создаст окно, которое будет отображаться в центре экрана сообщением "Привет, это моё диалоговое окно!".

Пользователь

от francisco.friesen , 2 месяца назад

@gage 

Для создания диалогового окна на JavaScript вы можете использовать функцию alert() или создать собственное кастомное диалоговое окно.


Вот пример создания кастомного диалогового окна на JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
function customDialog(message) {
  var dialogBox = document.createElement('div');
  dialogBox.classList.add('dialog-box');
  
  var dialogMessage = document.createElement('p');
  dialogMessage.textContent = message;
  
  var closeButton = document.createElement('button');
  closeButton.textContent = 'OK';
  closeButton.addEventListener('click', function() {
    dialogBox.parentNode.removeChild(dialogBox);
  });
  
  dialogBox.appendChild(dialogMessage);
  dialogBox.appendChild(closeButton);
  
  document.body.appendChild(dialogBox);
}

customDialog('Это кастомное диалоговое окно!');


CSS для стилизации диалогового окна:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
.dialog-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 16px;
  background-color: #ffffff;
  border: 1px solid #000000;
  box-shadow: 0px 0px 10px #000000;
  z-index: 99999;
}

.dialog-box button {
  margin-top: 8px;
}


Вызов функции customDialog позволит создать кастомное диалоговое окно с сообщением и кнопкой "OK".