add modal
parent
fc47b49cb3
commit
071986ff46
@ -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');
|
||||
});
|
||||
});
|
||||
});
|
@ -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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue