button.trigger(data-modal-trigger="trigger-1")
i.fa.fa-fire(aria-hidden="true")
| Modal 1
button.trigger(data-modal-trigger="trigger-2")
i.fa.fa-fire(aria-hidden="true")
| Modal 2
button.trigger(data-modal-trigger="trigger-3")
i.fa.fa-fire(aria-hidden="true")
| Modal 3
button.trigger(data-modal-trigger="trigger-1")
i.fa.fa-fire(aria-hidden="true")
| This is just a test.
.modal(data-modal="trigger-1")
article.content-wrapper
button.close
header.modal-header
h2 This is a modal 1
.content
p Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
footer.modal-footer
button.action Accept
button.action Decline
.modal(data-modal="trigger-2")
article.content-wrapper
button.close
header.modal-header
h2 This is a modal 2
.content
p Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
footer.modal-footer
button.action Accept
button.action Decline
.modal(data-modal="trigger-3")
article.content-wrapper
button.close
header.modal-header
h2 This is a modal 3
.content
p Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
footer.modal-footer
button.action Accept
button.action Decline
View Compiled
$base-duration: 0.25s;
// Colors
$primary: slategray;
$accent: tomato;
$white: whitesmoke;
$green: #2ecc71;
$red: #e74c3c;
// Breakpoints
$sm: 20rem;
$med: 48rem;
$lg: 64rem;
*, *:before, *:after {
box-sizing: border-box;
outline: none;
}
html {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
font-smooth: auto;
font-weight: 300;
line-height: 1.5;
color: #444;
background-color: $primary;
}
button {
cursor: pointer;
}
body {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
}
.pdfobject-container { height: 30rem; border: 1rem solid rgba(0,0,0,.1); }
.trigger {
margin: 0 0.75rem;
padding: 0.625rem 1.25rem;
border: none;
border-radius: 0.25rem;
box-shadow: 0 0.0625rem 0.1875rem rgba(0,0,0,0.12), 0 0.0625rem 0.125rem rgba(0,0,0,0.24);
transition: all $base-duration cubic-bezier(.25,.8,.25,1);
font-size: 0.875rem;
font-weight: 300;
i {
margin-right: 0.3125rem;
}
&:hover {
box-shadow: 0 0.875rem 1.75rem rgba(0,0,0,0.25), 0 0.625rem 0.625rem rgba(0,0,0,0.22);
}
}
.modal {
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
height: 0vh;
background-color: transparent;
overflow: hidden;
transition: background-color $base-duration ease;
z-index: 9999;
&.open {
position: fixed;
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,0.5);
transition: background-color $base-duration;
> .content-wrapper {
transform: scale(1.0);
}
}
.content-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 50%;
margin: 0;
padding: 2.5rem;
background-color: white;
border-radius: 0.3125rem;
box-shadow: 0 0 2.5rem rgba(0,0,0,0.5);
transform: scale(0.0);
transition: transform $base-duration;
transition-delay: 0.15s;
.close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border: none;
background-color: transparent;
font-size: 1.5rem;
transition: $base-duration linear;
&:before, &:after {
position: absolute;
content: '';
width: 1.25rem;
height: 0.125rem;
background-color: black;
}
&:before {
transform: rotate(-45deg);
}
&:after {
transform: rotate(45deg);
}
&:hover {
transform: rotate(360deg);
&:before, &:after {
background-color: $accent;
}
}
}
.modal-header {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 0 0 1.25rem;
h2 {
font-size: 1.5rem;
font-weight: bold;
}
}
.content {
position: relative;
display: flex;
p {
font-size: 0.875rem;
line-height: 1.75;
}
}
.modal-footer {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
margin: 0;
padding: 1.875rem 0 0;
.action {
position: relative;
margin-left: 0.625rem;
padding: 0.625rem 1.25rem;
border: none;
background-color: $primary;
border-radius: 0.25rem;
color: white;
font-size: 0.87rem;
font-weight: 300;
overflow: hidden;
z-index: 1;
&:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: rgba(255,255,255,0.2);
transition: width $base-duration;
z-index: 0;
}
&:first-child {
background-color: $green;
}
&:last-child {
background-color: $red;
}
&:hover {
&:before {
width: 100%;
}
}
}
}
}
}
View Compiled
const buttons = document.querySelectorAll('.trigger[data-modal-trigger]');
for(let button of buttons) {
modalEvent(button);
}
function modalEvent(button) {
button.addEventListener('click', () => {
const trigger = button.getAttribute('data-modal-trigger');
// console.log('trigger', trigger)
const modal = document.querySelector(`[data-modal=${trigger}]`);
console.log('modal', modal)
const contentWrapper = modal.querySelector('.content-wrapper');
const close = modal.querySelector('.close');
close.addEventListener('click', () => modal.classList.remove('open'));
modal.addEventListener('click', () => modal.classList.remove('open'));
contentWrapper.addEventListener('click', (e) => e.stopPropagation());
modal.classList.toggle('open');
});
}
