Flapping Dialog Box

zFunx CSS Tricks February 26, 2018 | 0

A dialog box with flapping entrance animation with flapping buttons

[WPGP gif_id=”562″ width=”600″]

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

[WPGP gif_id=”585″ width=”600″]

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

[WPGP gif_id=”588″ width=”600″]

Add flipping effect

/*..*/

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

.confirmNotifi.show .content{
	transform: translate(-50%, -50%);
}
	
/*..*/

[WPGP gif_id=”591″ width=”600″]

Make the flipping effect 3D :

.confirmNotifi {
	/*..*/
	perspective: 100vh;
}

/*..*/

[WPGP gif_id=”594″ width=”600″]

Add flapping effect

.confirmNotifi.show .content{
	/*..*/
	transition: .7s cubic-bezier(.7,.5,0,1.8);
}

[WPGP gif_id=”597″ width=”600″]

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

[WPGP gif_id=”600″ width=”600″]

Transform buttons on hover

/*..*/

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

[WPGP gif_id=”603″ width=”600″]

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 :