"Flapping Dialog Box"
Bootstrap 4.0.0 Snippet by prakash27dec

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <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">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"); } </script> </div>
body{ background:#fff; } .confirmNotifi { background:rgba(0,0,0,0.7); position:fixed; top:0; bottom:0; left:0; right:0; color:#000; font-size:large; text-align:center; 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); transition:.3s; transform-origin:50% 0; } .confirmNotifi.show .yes, .confirmNotifi.show .no { transform:rotateX(0); } .confirmNotifi .yes { background:hsl(120,100%,60%); border-radius:0 0 0 10px; } .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 .no { background:hsl(0,100%,60%); border-radius:0 0 10px; } .confirmNotifi.show .yes:hover, .confirmNotifi.show .no:hover { transform:rotateX(-25deg); transition:.3s; } .confirmNotifi .content > * { box-shadow:4px 4px 16px rgba(0,0,0,0.3); } @media (max-width:600px){ .confirmNotifi .content { width:80%; } }

Related: See More


Questions / Comments: