Skip to content

Commit

Permalink
create popup
Browse files Browse the repository at this point in the history
  • Loading branch information
gergVlad committed Dec 9, 2024
1 parent f236470 commit f31d0fc
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 0 deletions.
16 changes: 16 additions & 0 deletions 05-lection3/02-modal/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,22 @@
<title>Modal</title>
</head>
<body>
<button id="modal-open" class="popup-button popup-button_primary">Open modal</button>
<div id="modal" class="popup">
<div class="popup__main-block">
<div class="popup__title">Modal title</div>
<div class="popup__text">
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
</div>
<button id="modal-close" class="popup__close-button">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4714 3.52861C12.7318 3.78896 12.7318 4.21107 12.4714 4.47141L4.47141 12.4714C4.21107 12.7318 3.78896 12.7318 3.52861 12.4714C3.26826 12.2111 3.26826 11.789 3.52861 11.5286L11.5286 3.52861C11.789 3.26826 12.2111 3.26826 12.4714 3.52861Z" fill="#495057"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.52861 3.52861C3.78896 3.26826 4.21107 3.26826 4.47141 3.52861L12.4714 11.5286C12.7318 11.789 12.7318 12.2111 12.4714 12.4714C12.2111 12.7318 11.789 12.7318 11.5286 12.4714L3.52861 4.47141C3.26826 4.21107 3.26826 3.78896 3.52861 3.52861Z" fill="#495057"/>
</svg>
</button>
</div>
</div>
</body>
<script src="./index.js"></script>
</html>
2 changes: 2 additions & 0 deletions 05-lection3/02-modal/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,14 @@
}

modalOpen.addEventListener('click', () => {
modalOpen.style.display = 'none';
modal.style.display = 'block';
document.body.overflow = 'hidden';
});

close.addEventListener('click', () => {
modal.style.display = 'none';
modalOpen.style.display = 'block';
document.body.overflow = 'initial';
});
})();
66 changes: 66 additions & 0 deletions 05-lection3/02-modal/modal.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
.popup-button {
font-family: 'Roboto';
font-size: 16px;
font-weight: 500;
height: 48px;
border: none;
border-radius: 8px;
padding-inline: 52px;
text-wrap: nowrap;
cursor: pointer;
transition: all 200ms ease-in-out;
}
.popup-button_primary {
background-color: var(--primary);
color: var(--white);
}
.popup-button_primary:hover {
background-color: #2342C0;
}
.popup {
display: none;
width: 100%;
height: 100vh;
background: rgba(196, 196, 196, 0.5);
position: absolute;
top: 0;
left: 0;
}
.popup__main-block {
max-width: 428px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 30px 40px;
background: #fff;
border-radius: 8px;
}
.popup__title {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 24px;
color: #334D6E;
margin-bottom: 14px;
}
.popup__text {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: var(--grey-4);
}
.popup__close-button {
background: none;
border: none;
padding: 0;
height: 16px;
position: absolute;
top: 15px;
right: 15px;
cursor: pointer;
}

0 comments on commit f31d0fc

Please sign in to comment.