ТЗ - Создать HTML-страницу и добавить на нее кнопку, которая будет открывать модальное окно. <body> <button id='openBtn'>Открыть</button> <div id='modalOverlay' class="modal_overlay"> <div class="modal"> <p>Модальное окно</p> <button id='closeBtn'>Закрыть</button> </div> </div> </body> .modal_overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: none; } .modal { background: white; margin-left:40%; margin-top:1%; padding-bottom:20px; border-radius: 8px; width: 200px; height: 80px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } #openBtn{ border-radius:10px; border:2px solid #4169E1; background:#ADD8E6; color:#000080; } #closeBtn{ border-radius:10px; border:2px solid #DC143C; background:#FA8072; color:#8B0000; } #closeBtn:hover{ background:#CD5C5C; } #openBtn:hover{ background:#87CEEB; } const openBtn = document.getElementById('openBtn'); const closeBtn = document.getElementById('closeBtn'); const modalOverlay = document
ТЗ - Создать HTML-страницу и добавить на нее кнопку, которая будет открывать модальное окно.
HTML
<body>
<button id='openBtn'>Открыть</button>
<div id='modalOverlay' class="modal_overlay">
<div class="modal">
<p>Модальное окно</p>
<button id='closeBtn'>Закрыть</button>
</div>
</div>
</body>
CSS
.modal_overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
display: none;
}
.modal {
background: white;
margin-left:40%;
margin-top:1%;
padding-bottom:20px;
border-radius: 8px;
width: 200px;
height: 80px;
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
#openBtn{
border-radius:10px;
border:2px solid #4169E1;
background:#ADD8E6;
color:#000080;
}
#closeBtn{
border-radius:10px;
border:2px solid #DC143C;
background:#FA8072;
color:#8B0000;
}
#closeBtn:hover{
background:#CD5C5C;
}
#openBtn:hover{
background:#87CEEB;
}
JS
const openBtn = document.getElementById('openBtn');
const closeBtn = document.getElementById('closeBtn');
const modalOverlay = document.getElementById('modalOverlay');
openBtn.addEventListener('click', ()=>{
modalOverlay.style.display = "flex";
});
closeBtn.addEventListener('click', ()=>{
modalOverlay.style.display = "none";
});
Ознакомиться с работай данного кода можно ТУТ.