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

 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('Привет, это моё диалоговое окно!');

 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('Это кастомное диалоговое окно!');

 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;
}