На сегодняшний день, когда веб-страницы становятся все более важными для хранения различной информации, защита этой информации становится необходимостью. Одним из способов обеспечения безопасности страниц является использование JavaScript для создания модального окна, запрашивающего пароль.
На сегодняшний день, когда веб-страницы становятся все более важными для хранения различной информации, защита этой информации становится необходимостью. Одним из способов обеспечения безопасности страниц является использование JavaScript для создания модального окна, запрашивающего пароль.
В этом материале рассмотрим, как создать простой механизм защиты страницы с помощью модального окна и пароля на JavaScript.
1. Создание HTML-структуры страницы
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Защищенная страница</title>
<style>
/* Стили для модального окна */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
padding-top: 60px;
}
.modal-content {
background-color: #fefefe;
margin: 5% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="myModal" class="modal">
<div class="modal-content">
<form id="passwordForm">
<label for="password">Введите пароль:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Подтвердить">
</form>
</div>
</div>
<script>
// JavaScript код будет вставлен здесь
</script>
</body>
</html>
2. Написание JavaScript-кода для проверки пароля
// Получаем модальное окно
var modal = document.getElementById('myModal');
// Показываем модальное окно при загрузке страницы
window.onload = function() {
modal.style.display = 'block';
};
// Функция для проверки пароля
function checkPassword() {
var password = document.getElementById('password').value;
// Проверяем пароль
if (password === 'ваш_пароль_здесь') {
// Если пароль верный, скрываем модальное окно
modal.style.display = 'none';
} else {
// Если пароль неверный, выводим сообщение об ошибке
alert('Неверный пароль. Попробуйте еще раз.');
}
}
// Получаем форму для пароля
var passwordForm = document.getElementById('passwordForm');
// Добавляем обработчик события для отправки формы
passwordForm.addEventListener('submit', function(event) {
// Отменяем стандартное действие отправки формы
event.preventDefault();
// Проверяем пароль
checkPassword();
});
Этот код создает модальное окно, которое запрашивает пароль при загрузке страницы. Если введенный пароль совпадает с предварительно заданным, модальное окно закрывается, и пользователь получает доступ к содержимому страницы. В противном случае выводится сообщение об ошибке.
