Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A simple modal popup experiment using CSS transitions and transforms. Created at http://sassmeister.com
<div class="container flipped">
<p>Container View</p>
<p><button class="btn-open" type="submit">Reopen modal</button></p>
</div>
<div class="modal">
<div class="modal-popup">
<h1>Welcome.</h1>
<div class="modal-popup__field">
<p>
<input type="text" id="name" name="name" placeholder="enter name to join">
<span class="error">Please enter a valid name</span>
</p>
</div>
<p><button class="btn-join" type="submit">Join</button></p>
</div>
</div>
<script>
var container = document.querySelector('.container');
var nameErrorLabel = document.querySelector('.error')
var joinBtn = document.querySelector('.btn-join');
var openBtn = document.querySelector('.btn-open');
// Click listener for join button
// Collapses modal if name is specified
joinBtn.addEventListener('click', function(){
var name = document.getElementById('name');
if(name.value.trim() != '') {
container.classList.remove('flipped');
nameErrorLabel.style.display = "";
// Clear Value
name.value = '';
} else {
// Name not valid/empty
nameErrorLabel.style.display = "block";
};
});
// Keydown Event
document.getElementById('name').addEventListener('keydown', function(){
nameErrorLabel.style.display = "";
});
// Trigger modal again
openBtn.addEventListener('click', function() {
container.classList.add('flipped');
});
</script>
// ----
// Sass (v3.3.3)
// Compass (v1.0.0.alpha.18)
// Bourbon (v3.2.0.beta.1.a)
// ----
@import "bourbon/bourbon";
// Global Variables
$global-radius: 5px;
// Colors
$red: #FF4136;
$orange: #FF851B;
$light-blue: #7fdbff;
$white: #ffffff;
$gray: #555555;
// CUSTOM MIXINS
@mixin border-radius($radius: $global-radius) {
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
-o-border-radius: $radius;
-ms-border-radius: $radius;
}
* {
@include box-sizing(border-box);
}
html {
font-size: 16px;
}
body {
background: $gray;
font-family: Helvetica, Arial, sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
}
.container {
background: $light-blue;
height: 100%;
padding: 20px;
position: absolute;
width: 100%;
@include transition(-webkit-transform ease-out 0.3s);
@include transform-origin(50% 100%);
&.flipped {
@include transform(perspective(600px) rotateX(10deg));
& + .modal {
opacity: 1;
top: 0;
.modal-popup {
@include transform(scale(1));
}
}
}
}
.modal {
background: rgba(0, 0, 0, 0.7);
height: 100%;
opacity: 0;
position: fixed;
top: -100%;
width: 100%;
-webkit-transition: opacity linear 0.2s;
.modal-popup {
background: $orange;
color: $white;
min-height: 230px;
padding: 15px;
left: 50%;
margin: -150px 0 0 -150px;
position: absolute;
top: 50%;
width: 300px;
@include border-radius();
@include transform(scale(0.5));
@include transition(-webkit-transform cubic-bezier(1.000, -0.530, 0.405, 1.425) .3s);
&__field {
position: relative;
}
h1 {
margin: 40px 0 20px;
text-align: center;
text-transform: uppercase;
}
p {
font-size: em(14,16);
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
}
input {
border: 0 none;
display:block;
font-size: em(15);
line-height: 1.5;
margin: 0 auto;
padding: 15px 10px;
width: 70%;
border-radius: 5px;
}
.error {
background-color: $red;
border-radius: 5px;
color: #ffffff;
display: none;
left: em(45);
margin: 0 auto;
padding: 10px;
position: absolute;
top: em(-50);
width: 70%;
&:before {
bottom: -10px;
content: '';
border-top: 10px solid #ff4136;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
left: 45%;
position: absolute;
}
& + input {
margin-top: 45px;
}
}
button[type="submit"] {
background: none transparent;
border: 2px solid #ffffff;
border-radius: 5px;
color: #ffffff;
display: block;
font-size: em(18);
margin: 0 auto;
padding: 10px 20px;
&:hover {
background-color: rgba(255,255,255,0.2);
cursor: pointer;
}
}
}
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
background: #555555;
font-family: Helvetica, Arial, sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
}
.container {
background: #7fdbff;
height: 100%;
padding: 20px;
position: absolute;
width: 100%;
-webkit-transition: -webkit-transform ease-out 0.3s;
-moz-transition: -webkit-transform ease-out 0.3s;
transition: -webkit-transform ease-out 0.3s;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.container.flipped {
-webkit-transform: perspective(600px) rotateX(10deg);
-moz-transform: perspective(600px) rotateX(10deg);
-ms-transform: perspective(600px) rotateX(10deg);
-o-transform: perspective(600px) rotateX(10deg);
transform: perspective(600px) rotateX(10deg);
}
.container.flipped + .modal {
opacity: 1;
top: 0;
}
.container.flipped + .modal .modal-popup {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.modal {
background: rgba(0, 0, 0, 0.7);
height: 100%;
opacity: 0;
position: fixed;
top: -100%;
width: 100%;
-webkit-transition: opacity linear 0.2s;
}
.modal .modal-popup {
background: #ff851b;
color: white;
min-height: 230px;
padding: 15px;
left: 50%;
margin: -150px 0 0 -150px;
position: absolute;
top: 50%;
width: 300px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: -webkit-transform cubic-bezier(1, -0.53, 0.405, 1.425) 0.3s;
-moz-transition: -webkit-transform cubic-bezier(1, -0.53, 0.405, 1.425) 0.3s;
transition: -webkit-transform cubic-bezier(1, -0.53, 0.405, 1.425) 0.3s;
}
.modal .modal-popup__field {
position: relative;
}
.modal .modal-popup h1 {
margin: 40px 0 20px;
text-align: center;
text-transform: uppercase;
}
.modal .modal-popup p {
font-size: 0.875em;
text-align: center;
}
.modal .modal-popup label {
display: block;
margin-bottom: 10px;
}
.modal .modal-popup input {
border: 0 none;
display: block;
font-size: 0.9375em;
line-height: 1.5;
margin: 0 auto;
padding: 15px 10px;
width: 70%;
border-radius: 5px;
}
.modal .modal-popup .error {
background-color: #ff4136;
border-radius: 5px;
color: #ffffff;
display: none;
left: 2.8125em;
margin: 0 auto;
padding: 10px;
position: absolute;
top: -3.125em;
width: 70%;
}
.modal .modal-popup .error:before {
bottom: -10px;
content: '';
border-top: 10px solid #ff4136;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
left: 45%;
position: absolute;
}
.modal .modal-popup .error + input {
margin-top: 45px;
}
.modal .modal-popup button[type="submit"] {
background: none transparent;
border: 2px solid #ffffff;
border-radius: 5px;
color: #ffffff;
display: block;
font-size: 1.125em;
margin: 0 auto;
padding: 10px 20px;
}
.modal .modal-popup button[type="submit"]:hover {
background-color: rgba(255, 255, 255, 0.2);
cursor: pointer;
}
<div class="container flipped">
<p>Container View</p>
<p><button class="btn-open" type="submit">Reopen modal</button></p>
</div>
<div class="modal">
<div class="modal-popup">
<h1>Welcome.</h1>
<div class="modal-popup__field">
<p>
<input type="text" id="name" name="name" placeholder="enter name to join">
<span class="error">Please enter a valid name</span>
</p>
</div>
<p><button class="btn-join" type="submit">Join</button></p>
</div>
</div>
<script>
var container = document.querySelector('.container');
var nameErrorLabel = document.querySelector('.error')
var joinBtn = document.querySelector('.btn-join');
var openBtn = document.querySelector('.btn-open');
// Click listener for join button
// Collapses modal if name is specified
joinBtn.addEventListener('click', function(){
var name = document.getElementById('name');
if(name.value.trim() != '') {
container.classList.remove('flipped');
nameErrorLabel.style.display = "";
// Clear Value
name.value = '';
} else {
// Name not valid/empty
nameErrorLabel.style.display = "block";
};
});
// Keydown Event
document.getElementById('name').addEventListener('keydown', function(){
nameErrorLabel.style.display = "";
});
// Trigger modal again
openBtn.addEventListener('click', function() {
container.classList.add('flipped');
});
</script>
@graphicbeacon

This comment has been minimized.

Copy link
Owner Author

graphicbeacon commented Mar 29, 2014

Quickly mocked together a prototype of a username entry area, combined with some css transitions. This is just a simple experiment and is not to be used in a production environment.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.