From 071986ff46b3507bae71070bffbf82729d4565a9 Mon Sep 17 00:00:00 2001 From: Kevin Date: Mon, 19 Sep 2022 15:20:13 +0000 Subject: [PATCH] add modal --- .DS_Store | Bin 0 -> 6148 bytes index.html | 18 +++++++++++++ modal.js | 16 ++++++++++++ style.css | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 107 insertions(+), 1 deletion(-) create mode 100644 .DS_Store create mode 100644 modal.js diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..cd3a2cf86a516c8064df523e3cb54a7528c4c45a GIT binary patch literal 6148 zcmeHKOKQU~5S>X)F?8c)mbyZ2AcAuOU!aACP{;>bnzdIsSC7^=pN;Ew=WfCq7(Hn; zPeO0u@ra0SKVLT@ortt>L%G>7H`_O#*(xIngyW38d|Ze3^YL;%%(8zE823@$ + + +
+ +
+ diff --git a/modal.js b/modal.js new file mode 100644 index 0000000..c0a7563 --- /dev/null +++ b/modal.js @@ -0,0 +1,16 @@ +var modal = document.querySelector('[data-modal]'); + +modal.addEventListener('click', function (event) { + event.preventDefault(); + var modalId = document.getElementById(modal.dataset.modal); + modalId.classList.add('open'); + + var exits = modalId.querySelectorAll('.modal-exit'); + console.log(exits) + exits.forEach(function (exit) { + exit.addEventListener('click', function (event) { + event.preventDefault(); + modalId.classList.remove('open'); + }); + }); +}); diff --git a/style.css b/style.css index 8442b2a..513e10c 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,75 @@ +/*! reset.css v1.1.0 | MIT License | github.com/pyxel-dev/reset-css */html,body,blockquote,button,dd,dl,dt,figure,fieldset,h1,h2,h3,h4,h5,h6,hr,iframe,input,legend,li,ol,p,pre,select,textarea,ul{margin:0;padding:0}*,*::before,*::after{box-sizing:border-box}body{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Open Sans", "Helvetica Neue", sans-serif}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:normal}img{border-style:none}img,video{height:auto;max-width:100%}iframe{border:0}label{display:inline-block}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}ul{list-style:none} + + html { background-color: #000000; -} \ No newline at end of file +} + +.info { + position: absolute; + bottom: 1rem; + right: 1rem; + cursor: pointer; + padding: .5rem; +} + +.modal { + position: fixed; + width: 100vw; + height: 100vh; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; +} + +.modal.open { + visibility: visible; + opacity: 1; + transition-delay: 0s; +} + +.modal-bg { + position: absolute; + background: none; + width: 100%; + height: 100%; +} + +.modal-container { + border-radius: .5rem; + background: #888; + position: relative; + padding: 2rem; +} + +.modal-close { + position: absolute; + right: .5rem; + top: .5rem; + outline: none; + appearance: none; + background: none; + border: none; + cursor: pointer; +} + +.modal-container h1 { + font-size: 2rem; + font-weight: bold; + margin-bottom: .5rem; +} + +.modal-container h2 { + font-size: 1.25rem; + font-weight: bold; + margin-bottom: 2rem; +} + +.modal-container a { + color: #fff; +}