Как создать модальное окно, подобное тому, что используется на mail.ru?

Question

Aubrey

html , javascript , css

Как создать модальное окно, подобное тому, что используется на mail.ru?

Как добиться того, чтобы модальное окно с закруглёнными краями и полосами прокрутки, аналогичное примеру на mail.ru, корректно отображалось во всех браузерах при нажатии на кнопку "Войти"?

6 марта 2025 г. 23:44

Ответы на вопрос 1

Похожие вопросы

Answer 1

Создание модального окна, подобного тому, что используется на mail.ru, можно реализовать с помощью HTML, CSS и JavaScript. Вот простой пример кода, который демонстрирует, как создать модальное окно с закруглёнными краями и полосами прокрутки.

### HTML

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Модальное окно</title>
</head>
<body>

<button id="openModal">Войти</button>

<div id="modal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>Авторизация</h2>
        <form>
            <label for="username">Логин:</label>
            <input type="text" id="username" required>
            <br>
            <label for="password">Пароль:</label>
            <input type="password" id="password" required>
            <br>
            <button type="submit">Войти</button>
        </form>
    </div>
</div>

<script src="script.js"></script>
</body>
</html>
```

### CSS (styles.css)

```css
body {
    font-family: Arial, sans-serif;
}

.modal {
    display: none; /* Скрыть модальное окно по умолчанию */
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0, 0, 0, 0.5); 
}

.modal-content {
    background-color: white;
    margin: 15% auto; 
    padding: 20px;
    border-radius: 10px; /* Закруглённые углы */
    width: 300px; /* Ширина модального окна */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Тень для модального окна */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

input {
    margin-bottom: 10px;
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
```

### JavaScript (script.js)

```javascript
// Получаем элементы модального окна и кнопки
var modal = document.getElementById("modal");
var btn = document.getElementById("openModal");
var span = document.getElementsByClassName("close")[0];

// Открытие модального окна при нажатии на кнопку
btn.onclick = function() {
    modal.style.display = "block";
}

// Закрытие модального окна при нажатии на (x)
span.onclick = function() {
    modal.style.display = "none";
}

// Закрытие модального окна при клике вне его
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

// Можно добавить закрытие окна при нажатии на клавишу ESC
window.onkeydown = function(event) {
    if (event.key === "Escape") {
        modal.style.display = "none";
    }
}
```

### Инструкции

1. **HTML**: Создайте структуру вашей страницы с кнопкой для открытия модального окна и самим модальным окном.
2. **CSS**: Примените стили, чтобы сделать модальное окно эстетически привлекательным с закруглёнными углами и тенью.
3. **JavaScript**: Реализуйте функционал открытия и закрытия модального окна.

### Кроссбраузерность

Чтобы добиться корректного отображения во всех современных браузерах, следует:
- Убедиться, что у вас включены метатеги для мобильных браузеров.
- Использовать резиновую верстку (flexbox или grid) для адаптивности.
- Проверить код в различных браузерах (Chrome, Firefox, Safari, Edge) и на разных устройствах.
- Вы можете использовать библиотеки, такие как jQuery или Bootstrap, которые обеспечивают кроссбраузерную совместимость и упрощают процесс создания модальных окон.

Этот простой пример предоставляет базовую реализацию модального