Flapping Dialog Box

Flapping Dialog Box
A dialog box with flapping entrance animation with flapping buttons
GIF flapping dialog box

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>

simple html page

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;
}

simple html page with background

Centering the content

.confirmNotifi .content{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

content at center

Styling Title

.confirmNotifi .title{
	background: hsl(0, 0%, 90%);
	padding: 50px;
	border-radius: 10px 10px 0 0;
}

title with background

Remove extra padding from top :
.confirmNotifi  .title h2{
	margin-top: 0;
}

title with background

Styling Buttons

Position buttons side by side :
.confirmNotifi .yes,.confirmNotifi .no{
	width: 50%;
	float: left;
}

side to side buttons

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%);
}

colored buttons

Set padding :
.confirmNotifi .yes,.confirmNotifi .no{
	/*..*/
	padding: 20px;
}

buttons with padding

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;
}

dialog box

Set Shadow

.confirmNotifi .content > *{
	box-shadow:4px 4px 16px rgba(0,0,0,0.3);
}

dialog box with shadow

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");
}
GIF show dialog box on action
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");
}
GIF show and hide dialog box

Add flipping effect

/*..*/

.confirmNotifi .content{
	/*..*/
	transform: translate(-50%, -50%) rotateX(-90deg);
	transition: .3s;
}

.confirmNotifi.show .content{
	transform: translate(-50%, -50%);
}
	
/*..*/
GIF dialog box with flat flipping effect
Make the flipping effect 3D :
.confirmNotifi {
	/*..*/
	perspective: 100vh;
}

/*..*/
GIF dialog box with 3D flipping effect

Add flapping effect

.confirmNotifi.show .content{
	/*..*/
	transition: .7s cubic-bezier(.7,.5,0,1.8);
}
GIF dialog box with 3D flapping effect

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);
}
GIF dialog box with flapping button

Transform buttons on hover

/*..*/

.confirmNotifi.show .yes:hover,.confirmNotifi.show .no:hover{
	transform:rotateX(-25deg);
	transition: .3s;
}
GIF transform buttons on hover

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 :

Leave a Reply

Your email address will not be published. Required fields are marked *