Как сделать диалоговое окно на javascript, типа alert()?
2 ответа
@ciara
Для создания диалогового окна на JavaScript можно использовать функцию confirm() или prompt().
1 2 3 4 5 |
// Диалоговое окно с кнопками "OK" и "Cancel" confirm("Вы уверены?"); // Диалоговое окно с полем ввода prompt("Введите ваше имя", "John Doe"); |
Функция confirm() возвращает true, если пользователь нажал кнопку "OK", и false, если нажал "Cancel".
Функция prompt() возвращает введенное пользователем значение или null, если пользователь нажал "Cancel" или оставил поле ввода пустым.
Пример использования:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
let result = confirm("Вы уверены?") if (result) { alert("Пользователь нажал OK"); } else { alert("Пользователь нажал Cancel"); } let name = prompt("Введите ваше имя", "John Doe"); if (name) { alert("Привет, " + name); } else { alert("Вы не ввели имя"); } |
Можно также создать свое собственное диалоговое окно с помощью HTML и CSS, и управлять его отображением и поведением с помощью JavaScript.
@ciara
Вот пример реализации диалогового окна на JavaScript, аналогичного функции alert():
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Alert Box</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button onclick="showAlert()">Show Alert</button>
<div id="alert-box" class="alert-box">
<div class="alert-content">
<span class="close" onclick="closeAlert()">×</span>
<p>This is a custom alert box.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
|
CSS (styles.css):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.alert-box {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f1f1f1;
border: 1px solid #ddd;
padding: 20px;
z-index: 1;
}
.alert-content {
position: relative;
}
.close {
position: absolute;
top: 5px;
right: 10px;
cursor: pointer;
}
|
JavaScript (script.js):
1 2 3 4 5 6 7 8 9 |
function showAlert() {
let alertBox = document.getElementById('alert-box');
alertBox.style.display = 'block';
}
function closeAlert() {
let alertBox = document.getElementById('alert-box');
alertBox.style.display = 'none';
}
|
Этот код создает кнопку, при нажатии на которую появляется кастомное диалоговое окно. Клик по кнопке с крестиком в верхнем правом углу закрывает это окно. Вы можете настроить стили CSS и содержимое диалогового окна по вашему усмотрению.