A dialog box with flapping entrance animation with flapping buttons
Set up our HTML
Write the following simple HTML :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.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
|
1 2 3 4 5 6 |
.confirmNotifi .content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } |
Styling Title
|
1 2 3 4 5 |
.confirmNotifi .title{ background: hsl(0, 0%, 90%); padding: 50px; border-radius: 10px 10px 0 0; } |
Remove extra padding from top :
|
1 2 3 |
.confirmNotifi .title h2{ margin-top: 0; } |
Styling Buttons
Position buttons side by side :
|
1 2 3 4 |
.confirmNotifi .yes,.confirmNotifi .no{ width: 50%; float: left; } |
Set colors and make round corners :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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 :
|
1 2 3 4 |
.confirmNotifi .yes,.confirmNotifi .no{ /*..*/ padding: 20px; } |
Oops. It’s because padding making the width of buttons more than 50%. Fix this as follows :
|
1 2 3 4 |
.confirmNotifi .yes,.confirmNotifi .no{ /*..*/ box-sizing: border-box; } |
Set Shadow
|
1 2 3 |
.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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.confirmNotifi { /*..*/ opacity: 0; visibility: hidden; transition: .3s; } .confirmNotifi.show { opacity: 1; visibility: visible; } /*..*/ |
|
1 2 3 4 5 6 7 |
<button onclick="showConfirmationNotification('confirmNotifi')"> Delete file </button> <!-- .. --> |
|
1 2 3 |
function showConfirmationNotification(id) { document.getElementById(id).classList.add("show"); } |
Hide dialog box on clicking anywhere :
|
1 2 3 4 |
<!-- add onclick method --> <div id="confirmNotifi" class="confirmNotifi" onclick="hideConfirmationNotification(this)"> <!-- .. --> </div> |
|
1 2 3 |
function hideConfirmationNotification(x) { x.classList.remove("show"); } |
Add flipping effect
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*..*/ .confirmNotifi .content{ /*..*/ transform: translate(-50%, -50%) rotateX(-90deg); transition: .3s; } .confirmNotifi.show .content{ transform: translate(-50%, -50%); } /*..*/ |
Make the flipping effect 3D :
|
1 2 3 4 5 6 |
.confirmNotifi { /*..*/ perspective: 100vh; } /*..*/ |
Add flapping effect
|
1 2 3 4 |
.confirmNotifi.show .content{ /*..*/ transition: .7s cubic-bezier(.7,.5,0,1.8); } |
Make the buttons flappy too
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/*..*/ .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
|
1 2 3 4 5 6 |
/*..*/ .confirmNotifi.show .yes:hover,.confirmNotifi.show .no:hover{ transform:rotateX(-25deg); transition: .3s; } |
Make it good looking on mobile
|
1 2 3 4 5 6 7 |
/*..*/ @media (max-width: 600px){ .confirmNotifi .content{ width: 80%; } } |
Whole code :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
<!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 :
