Pure Responsive CSS Overlay Modal Popup Plugin

A modal solution for a responsive CSS overlay without any JS tricks, checkboxes and label. Click the blank area to overlay the background to close the modal.

overlay modal popup, modal overlay css, modal overlay another modal, modal popup in html, jquery modal popup

How to make use of it:

Add the title, body content, and close button to the form as follows:

<div id="modal1" class="overlay">
  <a class="cancel" href="#"></a>
  <div class="modal">
    <h2>This is Modal Overlay 1</h2>
    <div class="content">
    <p>Click outside the modal to close.</p>
    </div>
  </div>
</div>

Create a conditional toggle link pointing to the conditional ID you just created.

<a href="#modal1" class="button">Open Modal</a>

Modal style in CSS.

.modal {
  margin: 100px auto;
  padding: 20px;
  background: #fff;
  border: 1px solid #666;
  width: 300px;
  border-radius: 6px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  position: relative;
}

.modal h2 { margin-top: 0; }

.modal .close {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 20px;
  right: 20px;
  opacity: 0.8;
  transition: all 200ms;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  color: #777;
}

.modal .close:hover { opacity: 1; }

.modal .content {
  max-height: 400px;
  overflow: auto;
}

.modal p {
  margin: 0 0 1em;
  text-align: center;
}

.modal p:last-child { margin: 0; }

Full screen wallpaper overlay style.

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 200ms;
  visibility: hidden;
  opacity: 0;
}

.overlay .cancel {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: default;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

Create Custom and Dynamic Modals Component | Xmodal-Vue

Minimal Overlay Modal, CSS-Modals Plugin/Github

See Demo And Download

Official Website(johnuberbacher): Click Here

This superior jQuery/javascript plugin is developed by johnuberbacher. For extra Advanced Usages, please go to the official website.