A Pen by Leonie

This awesome code was written by leonie, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright leonie ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>A Pen by  Leonie</title>
      <link rel="stylesheet" href="css/style.css">



  <button class="button-border toggleModal">trigger iModal</button> 
<div class="modal"> 
<button class="close toggleModal">Close</button>
  <script src='http://www.huzl.de/jquery/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>


    <script  src="js/index.js"></script>



/*Downloaded from https://www.codeseek.co/leonie/a-pen-by-leonie-vEqNLG */
.modal {  
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 400px;
  height: auto;
  margin-left: -200px;
  margin-top: -150px;
  background-color: $white;
  padding: 25px;
  border-radius: 5px;
  z-index: 10;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
opacity: 0;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
   display: none;
.modal.active {
  opacity: 0.8;
  cursor: pointer;
  display: block;

/*Downloaded from https://www.codeseek.co/leonie/a-pen-by-leonie-vEqNLG */
(function($) {

$('.toggleModal').on('click', function (e) {
  $('.modal').toggleClass('active', 2000, 'easeOutSine' );
})( jQuery );