HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Style.css">
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&family=Moderustic:wght@300..800&display=swap" rel="stylesheet">
<title>JS-ONE</title>
</head>
<body>
<div class="button">
<a href="#" id="open">Інформація</a>
</div>
<div class="modal" id="modal">
<div class="modal_cont">
<div class="modal_body" id="modalbody">
<h1 class="info">Інформація </h1>
<p class="infoblock">
Веб-дизайнер відповідає за оформлення інтернет-проекту, займається не лише візуальною його складовою, а й питаннями зручності користування сайтом . Основне завдання – придумати зовнішній вигляд, оформити проект загалом так, щоб він був найбільш зручним та привабливим для користувачів.
</p>
<div class="modalclose" id="close">✖</div>
</div>
</div>
</div>
<script src="JavaScript.jsg"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.button {
margin-top: 40px;
text-align: center;
}
.button a:hover {
box-shadow: #00FA9A 0px 0px 15px;
}
.button a {
background-color: #00FA9A;
padding: 20px 30px;
text-decoration: none;
font-family: "M PLUS Rounded 1c", sans-serif;
border-radius: 15px;
font-weight: bold;
color: #fff;
text-shadow: #000 0px 0px 15px;
}
.modal {
display: none;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background-color: rgb(0, 0, 0, .8);
z-index: 2;
visibility: hidden;
}
.modal.active {
display: block;
}
.modal_cont {
display: flex;
width: 100%;
height: 100%;
}
.modal_body {
margin: auto;
width: 500px;
background-color: #fff;
border-radius: 15px;
text-align: center;
padding: 100px 15px 0px 15px;
position: relative;
}
.info {
font-family: "Moderustic", sans-serif;
font-size: 30px;
position: relative;
bottom: 90px;
right: 147px;
}
.infoblock {
font-family: "Moderustic", sans-serif;
font-size: 20px;
position: relative;
bottom: 70px;
left: 3px;
text-align: left;
}
.modalclose {
position: absolute;
bottom: 294px;
left: 463px;
font-size: 19px;
cursor: pointer;
}
.modalclose:hover {
text-shadow: #000 0px 0px 15px;
}
JS
const button = document.getElementById('open');
const modalclose = document.getElementById('close');
const modal = document.getElementById('modal');
button.addEventListener('click', function(e){
e.preventDefault()
modal.classList.add('active');
})
modalclose.addEventListener('click', () => {
modal.classList.remove('active');
})
