Popup Modal

What is a popup modal How do you make a popup modal? This script and codes were developed by Aaron Levine on 05 April 2022, Tuesday.

How do I make an popup modal?
  1. Popup Modal Previews
  2. Popup Modal HTML Codes
  3. Popup Modal CSS Codes
  4. Popup Modal JS Codes
Popup Modal Previews

Popup Modal HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Popup Modal</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <meta content='width=device-width, height=device-height, minimum-scale=0.8, maximum-scale=0.8' name='viewport'>
<div class='modal-overlay show'>
  <div class='modal'>
    <div class='close'>&#x2715;</div>
    <div>
      <h3>This is a modal... enjoy : )</h3>
      <p>Yep... a modal</p>
    </div>
  </div>
</div>
<button class='show-modal'>Click me to show a modal</button>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.2/fastclick.min.js'></script>

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

</body>
</html>

Popup Modal CSS Codes

.modal-overlay {
  white-space: nowrap;
}
.modal-overlay:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.modal-overlay > .modal {
  width: 100%;
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}

.modal-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: all 0.5s, visibility 0 0.5s;
  background: transparent;
  visibility: hidden;
}
.modal-overlay.show {
  transition: all 0.5s, visibility 0 0;
  background: rgba(0, 0, 0, 0.2);
  visibility: visible;
}
.modal-overlay.show .modal {
  opacity: 1;
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}
.modal-overlay .modal {
  position: relative;
  display: inline-block;
  text-align: center;
  width: 50%;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-radius: 5px;
  box-shadow: 0 3px 10px -6px #333, 0 0 0.5px #666;
  background: #f9f9f9;
  color: #666;
  -webkit-transform: scale3d(0.1, 0.1, 0.1);
  -moz-transform: scale3d(0.1, 0.1, 0.1);
  -ms-transform: scale3d(0.1, 0.1, 0.1);
  -o-transform: scale3d(0.1, 0.1, 0.1);
  transform: scale3d(0.1, 0.1, 0.1);
  transition: all 0.25s cubic-bezier(0.38, 1.375, 0.63, 1.21);
  opacity: 0;
}
.modal-overlay .modal .close {
  content: '\2715';
  display: inline-block;
  position: absolute;
  right: -0.75rem;
  top: -0.75rem;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  border-radius: 50%;
  background: #CECECE;
  border: solid 2px #FFF;
  box-shadow: -1px 1px 5px -1px #666, 0 0 0.5px #666;
  font-size: 1.25rem;
  cursor: pointer;
}

button {
  padding: 1rem;
  font-weight: 800;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  background: #f9f9f9;
  font-weight: 800;
  color: #CCC;
}

Popup Modal JS Codes

$('.modal .close').on('click', function(){
  $(this).closest('.modal-overlay').removeClass('show');
});

$('.show-modal').on('click', function(){
  $('.modal-overlay').addClass('show');
});

//For Responsiveness
FastClick.attach(document.body);
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.