Easy Popup Overlay

Popup with jQuery

by amenadiel

HTML

<button id="trigger">Click me</button>
    <a href="https://www.bootstrap.com" target="_blank">bt</a>
    <div id="overlay">
      <div id="popup">
        <div id="close">X</div>
        <h2>This is a popup</h2>
        <p>You just triggered a popup</p>
      </div>
    </div>

CSS

button {
  background: #000;
  color: #fff;
  text-align: center;
  font-weight: bold;
  padding: 10px 30px;
  border-radius: 3px;	
}

#overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  display: none;
}

#popup {
  max-width: 600px;
  width: 80%;
  max-height: 300px;
  height: 80%;
  padding: 20px;
  position: relative;
  background: #fff;
  margin: 20px auto;
}

#close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  color: #000;
}

JavaScript

$(document).ready(function() {
  $('#trigger').click(function() {
    $('#overlay').fadeIn(300);  
  });
  $('#close').click(function() {
    $('#overlay').fadeOut(300);
  });
});