Jump to content

Abdullah Kaya

Members
  • Content Count

    2
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Abdullah Kaya

  • Rank
    Newbie
  • Birthday 01/26/1995

Previous Fields

  • Languages
    some php, some javascript

Profile Information

  • Gender
    Male
  • Location
    Turkey
  1. <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()">&times;</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
  2. Abdullah Kaya

    PHP email

    Why not use phpmailer
×
×
  • Create New...