Встречается на собеседованиях • сегодня
Как создать модальное окно без использования сторонних библиотек
Для создания модального окна без библиотек используем HTML, CSS и JavaScript.
**HTML:**
```html
```
**CSS:**
```css
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1000;
}
.modal-content {
background: white;
margin: 15% auto;
padding: 20px;
width: 50%;
}
.close {
float: right;
cursor: pointer;
}
```
**JavaScript:**
```js
const modal = document.getElementById('modal');
const btn = document.getElementById('openModal');
const closeBtn = document.querySelector('.close');
btn.onclick = () => modal.style.display = 'block';
closeBtn.onclick = () => modal.style.display = 'none';
window.onclick = (e) => {
if (e.target === modal) modal.style.display = 'none';
};
```
Это базовая реализация. Можно добавить анимации через CSS `transition` или `keyframes`.
Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
офферы быстрее!
Попробовать бесплатно
Следующий вопрос
Это единственный вопрос по вашему фильтру
как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы