Raktim Posted November 19, 2019 Share Posted November 19, 2019 I create a modal box that when the user clicks on the button the modal will appear with animation. When the user clicks on the close button ( located on the right side of the header area ) or anywhere of the screen except modal box it will disappear without animation. I want that the modal will disappear/hide with animation. I create two CSS animation. One is animatetop which I already used when modal will open and another is animatedown which I want to use when modal will disappear. But, I can't understand how to do that? See the code on JSFiddle <html> <head> <style> .background{ display:none; position: fixed; z-index: 1; height: 100%; left: 0; top: 0; width: 100%; padding: 100px; background-color: rgba(0,0,0,0.4); } .modal{ background-color: white; position: relative; border: 1px solid #888; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); animation-name: animatetop; animation-duration: 0.4s; width: 80%; } .header{ width: 100%; padding: 8px 20px; background-color: crimson; color: white; } .footer{ width: 100%; padding: 8px 20px; background-color: lime; color: white; } .middle{ width: 100%; padding: 2px 20px; background-color: white; color: black; } h2{ margin: 0px; } @keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } @keyframes animatedown { from {top:0; opacity:1} to {top:-300px; opacity:0} } span{ float: right; color: white; font-size: 28px; font-weight: bold; cursor: pointer; padding: 2px 5px; } </style> </head> <body> <button onclick="modal()">Open Modal</button> <div class="background" id="MyModal"> <div class="modal" id="modal"> <div class="header"> <span onClick="a()">×</span> <h2>Header</h2> </div> <div class="middle"> <h1>Modal</h1><br> <h1>Popup Box</h1> </div> <div class="footer"> <h2>Footer</h2> </div> </div> </div> </body> <script> background = document.getElementById("MyModal"); function modal() { document.getElementById("MyModal").style.display = "block"; } function a() { document.getElementById("MyModal").style.display = "none"; } window.onclick = function (event) { if(event.target == background) { document.getElementById("MyModal").style.display = "none"; } } </script> </html> Link to comment Share on other sites More sharing options...
Abdullah Kaya Posted November 19, 2019 Share Posted November 19, 2019 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <title>Title</title> <meta charset="utf-8"> <style> .background{ display:none; position: fixed; z-index: 1; height: 100%; left: 0; top: 0; width: 100%; padding: 100px; background-color: rgba(0,0,0,0.4); } .modal{ background-color: white; position: relative; border: 1px solid #888; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); width: 80%; } .header{ width: 100%; padding: 8px 20px; background-color: crimson; color: white; } .footer{ width: 100%; padding: 8px 20px; background-color: lime; color: white; } .middle{ width: 100%; padding: 2px 20px; background-color: white; color: black; } .open { display: block; } h2{ margin: 0px; } span{ float: right; color: white; font-size: 28px; font-weight: bold; cursor: pointer; padding: 2px 5px; } .animated { animation-duration: 1s; animation-fill-mode: both; } @keyframes fadeintop { 0% { transform: translateY(-50px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .fadeintop { animation-name: fadeintop; } @keyframes fadeouttop { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-50px); opacity: 0; } } .fadeouttop { animation-name: fadeouttop; } </style> </head> <body> <button id="button">Open Modal</button> <div class="background" id="MyModal"> <div class="modal" id="modal"> <div class="header"> <span onClick="a()">×</span> <h2>Header</h2> </div> <div class="middle"> <h1>Modal</h1><br> <h1>Popup Box</h1> </div> <div class="footer"> <h2>Footer</h2> </div> </div> </div> </body> <script> var background = $('#MyModal')[0]; $("#button").on("click", e => { if(!$("#MyModal").hasClass("animated")) { $("#MyModal").addClass("animated"); } $("#MyModal").removeClass("fadeouttop"); $("#MyModal").addClass("fadeintop open"); }); function a() { $("#MyModal").removeClass("fadeintop"); $("#MyModal").addClass("animated fadeouttop"); setTimeout(function(){ $("#MyModal").removeClass("open"); },800); } $("body").on("click", event =>{ if(event.target == background) { a(); } }); </script> </html> You can use the jquery. Please try this codes. If you want all animation types : https://drive.google.com/file/d/1lU58HfEdFEizqpqk7kpfoWWT5_bpB5gq/view?usp=sharing Link to comment Share on other sites More sharing options...
Raktim Posted November 20, 2019 Author Share Posted November 20, 2019 Thanks for helped me. I need some time to understand the code. Because I am a JS beginner, not JQuery... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now