비전공자 개발일기

Javascript Modal Popup Box 본문

Javascript

Javascript Modal Popup Box

HiroDaegu 2022. 6. 7. 00:18
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JAVASCRIPT MODAL POPUP BOX</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
  <link  
  rel="stylesheet"  
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"  
 />  
</head>
<body>

    <header class="hero">  
      <div class="banner">  
       <h1>modal project</h1>  
       <button class="btn modal-btn">  
        open modal  
       </button>  
      </div>  
     </header>  

     <div class="modal-overlay">  
      <div class="modal-container">  
       <h3>modal content</h3>  
       <button class="close-btn"><i class="fas fa-times"></i></button>  
      </div>  
     </div>  
</body>
</html>
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");  
/*  
===============   
Variables  
===============  
*/  
:root {  
 /* dark shades of primary color*/  
 --clr-primary-1: hsl(205, 86%, 17%);  
 --clr-primary-2: hsl(205, 77%, 27%);  
 --clr-primary-3: hsl(205, 72%, 37%);  
 --clr-primary-4: hsl(205, 63%, 48%);  
 /* primary/main color */  
 --clr-primary-5: #49a6e9;  
 /* --clr-primary-5: rgb(73, 166, 233); */  
 /* lighter shades of primary color */  
 --clr-primary-6: hsl(205, 89%, 70%);  
 --clr-primary-7: hsl(205, 90%, 76%);  
 --clr-primary-8: hsl(205, 86%, 81%);  
 --clr-primary-9: hsl(205, 90%, 88%);  
 --clr-primary-10: hsl(205, 100%, 96%);  
 /* darkest grey - used for headings */  
 --clr-grey-1: hsl(209, 61%, 16%);  
 --clr-grey-2: hsl(211, 39%, 23%);  
 --clr-grey-3: hsl(209, 34%, 30%);  
 --clr-grey-4: hsl(209, 28%, 39%);  
 /* grey used for paragraphs */  
 --clr-grey-5: hsl(210, 22%, 49%);  
 --clr-grey-6: hsl(209, 23%, 60%);  
 --clr-grey-7: hsl(211, 27%, 70%);  
 --clr-grey-8: hsl(210, 31%, 80%);  
 --clr-grey-9: hsl(212, 33%, 89%);  
 --clr-grey-10: hsl(210, 36%, 96%);  
 --clr-white: #fff;  
 --clr-red-dark: hsl(360, 67%, 44%);  
 --clr-red-light: hsl(360, 71%, 66%);  
 --clr-green-dark: hsl(125, 67%, 44%);  
 --clr-green-light: hsl(125, 71%, 66%);  
 --clr-black: #222;  
 --ff-primary: "Roboto", sans-serif;  
 --ff-secondary: "Open Sans", sans-serif;  
 --transition: all 0.3s linear;  
 --spacing: 0.25rem;  
 --radius: 0.5rem;  
 --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);  
 --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);  
 --max-width: 1170px;  
 --fixed-width: 620px;  
}  
/*  
===============   
Global Styles  
===============  
*/  
*,  
::after,  
::before {  
 margin: 0;  
 padding: 0;  
 box-sizing: border-box;  
}  
body {  
 font-family: var(--ff-secondary);  
 background: var(--clr-grey-10);  
 color: var(--clr-grey-1);  
 line-height: 1.5;  
 font-size: 0.875rem;  
}  
ul {  
 list-style-type: none;  
}  
a {  
 text-decoration: none;  
}  
img:not(.logo) {  
 width: 100%;  
}  
img {  
 display: block;  
}  
h1,  
h2,  
h3,  
h4 {  
 letter-spacing: var(--spacing);  
 text-transform: capitalize;  
 line-height: 1.25;  
 margin-bottom: 0.75rem;  
 font-family: var(--ff-primary);  
}  
h1 {  
 font-size: 3rem;  
}  
h2 {  
 font-size: 2rem;  
}  
h3 {  
 font-size: 1.25rem;  
}  
h4 {  
 font-size: 0.875rem;  
}  
p {  
 margin-bottom: 1.25rem;  
 color: var(--clr-grey-5);  
}  
@media screen and (min-width: 800px) {  
 h1 {  
  font-size: 4rem;  
 }  
 h2 {  
  font-size: 2.5rem;  
 }  
 h3 {  
  font-size: 1.75rem;  
 }  
 h4 {  
  font-size: 1rem;  
 }  
 body {  
  font-size: 1rem;  
 }  
 h1,  
 h2,  
 h3,  
 h4 {  
  line-height: 1;  
 }  
}  
/* global classes */  
.btn {  
 text-transform: uppercase;  
 background: transparent;  
 color: var(--clr-black);  
 padding: 0.375rem 0.75rem;  
 letter-spacing: var(--spacing);  
 display: inline-block;  
 transition: var(--transition);  
 font-size: 0.875rem;  
 border: 2px solid var(--clr-black);  
 cursor: pointer;  
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);  
 border-radius: var(--radius);  
}  
.btn:hover {  
 color: var(--clr-white);  
 background: var(--clr-black);  
}  
/* section */  
.section {  
 padding: 5rem 0;  
}  
.section-center {  
 width: 90vw;  
 margin: 0 auto;  
 max-width: 1170px;  
}  
@media screen and (min-width: 992px) {  
 .section-center {  
  width: 95vw;  
 }  
}  
main {  
 min-height: 100vh;  
 display: grid;  
 place-items: center;  
}  
/*  
===============   
Modal  
===============  
*/  
.hero {  
 min-height: 100vh;  
 background: url("./hero.jpeg") center/cover no-repeat;  
 display: grid;  
 place-items: center;  
}  
.banner {  
 background: var(--clr-white);  
 padding: 4rem 0;  
 border-radius: var(--radius);  
 box-shadow: var(--light-shadow);  
 text-align: center;  
 width: 90vw;  
 max-width: var(--fixed-width);  
}  
.modal-btn {  
 margin-top: 2rem;  
 background: var(--clr-primary-5);  
 border-color: var(--clr-primary-5);  
 color: var(--clr-white);  
}  
.modal-btn:hover {  
 background: transparent;  
 color: var(--clr-primary-5);  
}  
.modal-overlay {  
 position: fixed;  
 top: 0;  
 left: 0;  
 width: 100%;  
 height: 100%;  
 background: rgba(73, 166, 233, 0.5);  
 display: grid;  
 place-items: center;  
 transition: var(--transition);  
 visibility: hidden;  
 z-index: -10;  
}  
/* OPEN/CLOSE MODAL */  
.open-modal {  
 visibility: visible;  
 z-index: 10;  
}  
.modal-container {  
 background: var(--clr-white);  
 border-radius: var(--radius);  
 width: 90vw;  
 height: 30vh;  
 max-width: var(--fixed-width);  
 text-align: center;  
 display: grid;  
 place-items: center;  
 position: relative;  
}  
.close-btn {  
 position: absolute;  
 top: 1rem;  
 right: 1rem;  
 font-size: 2rem;  
 background: transparent;  
 border-color: transparent;  
 color: var(--clr-red-dark);  
 cursor: pointer;  
 transition: var(--transition);  
}  
.close-btn:hover {  
 color: var(--clr-red-light);  
 transform: scale(1.3);  
}
 // select modal-btn,modal-overlay,close-btn  
 // listen for click events on modal-btn and close-btn  
 // when user clicks modal-btn add .open-modal to modal-overlay  
 // when user clicks close-btn remove .open-modal from modal-overlay  
 const modalBtn = document.querySelector(".modal-btn");  
 const modal = document.querySelector(".modal-overlay");  
 const closeBtn = document.querySelector(".close-btn");  
 modalBtn.addEventListener("click", function () {  
  modal.classList.add("open-modal");  
 });  
 closeBtn.addEventListener("click", function () {  
  modal.classList.remove("open-modal");  
 });
728x90
LIST

'Javascript' 카테고리의 다른 글

Background color picker  (0) 2022.06.18
Date Calculator  (0) 2022.06.15
Create Date Time Day  (0) 2022.05.31
Download Button Animation  (0) 2022.05.25
DETECT USER BROWSER  (0) 2022.05.24
'Javascript' Related Articles more