<button class="toggle-button" id="centered-toggle-button">Toggle</button>
<div class="modal" id="modal">
<h2>Modal Window</h2>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis deserunt corrupti, ut fugit magni qui quasi nisi amet repellendus non fuga omnis a sed impedit explicabo accusantium nihil doloremque consequuntur.</div>
<div class="actions">
<button class="toggle-button">OK</button>
</div>
</div>
html,
body {
height: 100%;
}
body {
background: #eee;
display: flex;
justify-content: center;
align-items: center;
}
.modal {
width: 500px;
background: white;
border: 1px solid #ccc;
transition: 1.1s ease-out;
box-shadow: -2rem 2rem 2rem rgba(black, 0.2);
filter: blur(0);
transform: scale(1);
opacity: 1;
visibility: visible;
&.red {
background: black;
color: red;
}
&.blue {
background: blue;
color: red;
}
&.off {
opacity: 0;
visibility: hidden;
filter: blur(8px);
transform: scale(0.33);
box-shadow: 1rem 0 0 rgba(black, 0.2);
}
@supports (offset-rotate: 0deg) {
// OLD
// offset-rotation: 0deg;
// NEW
offset-rotate: 0deg;
offset-path: path("M 250,100 S -300,500 -700,-200");
&.off {
offset-distance: 100%;
}
}
@media (prefers-reduced-motion) {
offset-path: none;
}
h2 {
border-bottom: 1px solid #ccc;
padding: 1rem;
margin: 0;
}
.content {
padding: 1rem;
}
.actions {
border-top: 1px solid #ccc;
background: #eee;
padding: 0.5rem 1rem;
button {
border: 0;
background: #78f89f;
border-radius: 5px;
padding: 0.5rem 1rem;
font-size: 0.8rem;
line-height: 1;
}
}
}
#centered-toggle-button {
position: absolute;
}
View Compiled
var buttons = document.querySelectorAll(".toggle-button");
var modal = document.querySelector("#modal");
[].forEach.call(buttons, function (button) {
button.addEventListener("click", function () {
modal.classList.toggle("off");
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.