A dialog box with flapping entrance animation with flapping buttons
Set up our HTML
Write the following simple HTML :
<div id="confirmNotifi" class="confirmNotifi"> <div class="content"> <div class="title"> <h2>Delete this file?</h2> This action is final and you won't be able to recover any data </div> <div class="yes">yes</div> <div class="no">No</div> </div> </div>
As dialog box is supposed to be drawn over page’s main content, it must be a fixed element. Write the following CSS code :
.confirmNotifi {
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #000;
text-align: center;
font-size: large;
font-family: "Arial Black", Gadget, sans-serif;
}
Centering the content
.confirmNotifi .content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Styling Title
.confirmNotifi .title{
background: hsl(0, 0%, 90%);
padding: 50px;
border-radius: 10px 10px 0 0;
}
Remove extra padding from top :
.confirmNotifi .title h2{
margin-top: 0;
}
Styling Buttons
Position buttons side by side :
.confirmNotifi .yes,.confirmNotifi .no{
width: 50%;
float: left;
}
Set colors and make round corners :
.confirmNotifi .yes,.confirmNotifi .no{
/*..*/
}
.confirmNotifi .yes{
border-radius: 0 0 0 10px;
background: hsl(120, 100%, 60%);
}
.confirmNotifi .no{
border-radius: 0 0 10px;
background: hsl(0, 100%, 60%);
}
Set padding :
.confirmNotifi .yes,.confirmNotifi .no{
/*..*/
padding: 20px;
}
Oops. It’s because padding making the width of buttons more than 50%. Fix this as follows :
.confirmNotifi .yes,.confirmNotifi .no{
/*..*/
box-sizing: border-box;
}
Set Shadow
.confirmNotifi .content > *{
box-shadow:4px 4px 16px rgba(0,0,0,0.3);
}
Show dialog box on clicking button
Add a button to the page. On clicking it, it will show the dialog box. Add the following CSS, HTML and javascript :
.confirmNotifi {
/*..*/
opacity: 0;
visibility: hidden;
transition: .3s;
}
.confirmNotifi.show {
opacity: 1;
visibility: visible;
}
/*..*/
<button onclick="showConfirmationNotification('confirmNotifi')">
Delete file
</button>
<!--
..
-->
function showConfirmationNotification(id) {
document.getElementById(id).classList.add("show");
}
Hide dialog box on clicking anywhere :
<!-- add onclick method --> <div id="confirmNotifi" class="confirmNotifi" onclick="hideConfirmationNotification(this)"> <!-- .. --> </div>
function hideConfirmationNotification(x) {
x.classList.remove("show");
}
Add flipping effect
/*..*/
.confirmNotifi .content{
/*..*/
transform: translate(-50%, -50%) rotateX(-90deg);
transition: .3s;
}
.confirmNotifi.show .content{
transform: translate(-50%, -50%);
}
/*..*/
Make the flipping effect 3D :
.confirmNotifi {
/*..*/
perspective: 100vh;
}
/*..*/
Add flapping effect
.confirmNotifi.show .content{
/*..*/
transition: .7s cubic-bezier(.7,.5,0,1.8);
}
Make the buttons flappy too
/*..*/
.confirmNotifi .content{
/*..*/
perspective: 100vh;
}
/*..*/
.confirmNotifi .yes,.confirmNotifi .no{
/*..*/
transform:rotateX(90deg);
transform-origin: 50% 0;
transition: .3s;
}
/*..*/
.confirmNotifi.show .yes,.confirmNotifi.show .no{
transform:rotateX(0);
}
.confirmNotifi.show .yes{
transition: .7s .2s cubic-bezier(.7,.5,0,1.8);
}
.confirmNotifi.show .no{
transition: 1s .2s cubic-bezier(.7,.5,0,1.8);
}
Transform buttons on hover
/*..*/
.confirmNotifi.show .yes:hover,.confirmNotifi.show .no:hover{
transform:rotateX(-25deg);
transition: .3s;
}
Make it good looking on mobile
/*..*/
@media (max-width: 600px){
.confirmNotifi .content{
width: 80%;
}
}
Whole code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.confirmNotifi {
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #000;
text-align: center;
font-size: large;
font-family: "Arial Black", Gadget, sans-serif;
opacity: 0;
visibility: hidden;
transition: .3s;
perspective: 100vh;
}
.confirmNotifi.show {
opacity: 1;
visibility: visible;
}
.confirmNotifi .content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateX(-90deg);
transition: .3s;
perspective: 100vh;
}
.confirmNotifi.show .content{
transform: translate(-50%, -50%);
transition: .7s cubic-bezier(.7,.5,0,1.8);
}
.confirmNotifi .title{
background: hsl(0, 0%, 90%);
padding: 50px;
border-radius: 10px 10px 0 0;
}
.confirmNotifi .title h2{
margin-top: 0;
}
.confirmNotifi .yes,.confirmNotifi .no{
width: 50%;
float: left;
padding: 20px;
box-sizing: border-box;
transform:rotateX(90deg);
transform-origin: 50% 0;
transition: .3s;
}
.confirmNotifi .yes{
border-radius: 0 0 0 10px;
background: hsl(120, 100%, 60%);
}
.confirmNotifi .no{
border-radius: 0 0 10px;
background: hsl(0, 100%, 60%);
}
.confirmNotifi .content > *{
box-shadow:4px 4px 16px rgba(0,0,0,0.3);
}
.confirmNotifi.show .yes,.confirmNotifi.show .no{
transform:rotateX(0);
}
.confirmNotifi.show .yes{
transition: .7s .2s cubic-bezier(.7,.5,0,1.8);
}
.confirmNotifi.show .no{
transition: 1s .2s cubic-bezier(.7,.5,0,1.8);
}
.confirmNotifi.show .yes:hover,.confirmNotifi.show .no:hover{
transform:rotateX(-25deg);
transition: .3s;
}
@media (max-width: 600px){
.confirmNotifi .content{
width: 80%;
}
}
</style>
</head>
<body>
<button onclick="showConfirmationNotification('confirmNotifi')">
Delete file
</button>
<div id="confirmNotifi" class="confirmNotifi" onclick="hideConfirmationNotification(this)">
<div class="content">
<div class="title">
<h2>Delete this file?</h2>
This action is final and you won't be able to recover any data
</div>
<div class="yes" onclick="deleteSuccess()">Yes</div>
<div class="no">No</div>
</div>
</div>
<script>
function showConfirmationNotification(id) {
document.getElementById(id).classList.add("show");
}
function hideConfirmationNotification(x) {
x.classList.remove("show");
}
function deleteSuccess() {
/*what to do after clicking yes*/
}
</script>
</body>
</html>
Code is also available here : https://codepen.io/zFunx/pen/xYyxzm. Useful links :
