Beautiful Subscription Modal Dialog In jQuery

A responsive, animated, beautiful, customizable subscription modal dialog to increase conversion rate. Written in plain HTML/CSS and a little bit of JavaScript (jQuery).

It provides a clean and beautiful way to collect your user emails, with a smooth look and feel.

How to use it:

1. Code the HTML for the subscription modal dialog.

<div class="modal">
  <div class="modal-content">
    <div class="photo"></div>
    <div class="desc">
      <div class="desc-header">
        <h2>Get Free Updates</h2>
        <button class="btn-close">&times;</button>
      </div>
      <div class="desc-content">
        <input type="email" placeholder="Email Address...">
        <button>Subscribe</button>
        <p>
          Get Weekly Email on latest Web & Graphic Design freebies. No spam, we promise!
        </p>
      </div>
    </div>
  </div>
</div>

2. The necessary CSS styles.

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  z-index: 10;
  opacity: 0;
  transition: .5s;
}

.modal.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.modal-content {
  /* border: 1px solid #000; */
  width: 600px;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  display: flex;
}

.modal-content > div {
  padding: 20px;
}

.photo {
  flex: 1;
  /* flex-grow: 1; flex-shrink: 0; flex-basis: 0; */
  background: url('office.jpg') no-repeat center right;
  background-size: cover;
}

.desc {
  flex: 2;
  text-align: center;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  opacity: 0;
  transition: .5s;
  pointer-events: none;
  /* visibility: hidden; */
}

.overlay.active {
  opacity: 1;
  pointer-events: all;
  /* visibility: visible; */
}

.btn-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  font-size: 18px;
  color: #999;
  cursor: pointer;
  outline: none;
}

.btn-close:hover {
  color: #000;
}

.desc-content input[type=email] {
  display: block;
  width: 100%;
  text-align: center;
  padding: 7px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  outline: none;
}

.desc-content input[type=email]::placeholder {
  color: #bbb;
  transition: 0.5s;
}

.desc-content input[type=email]:focus::placeholder {
  visibility: hidden;
  opacity: 0;
}

.desc-content button {
  display: block;
  width: 100%;
  border: none;
  background-color: crimson;
  color: #fff;
  cursor: pointer;
  padding: 7px;
  outline: none;
}

@media (max-width: 768px) {
  .modal-content {
    flex-direction: column;
    width: 100%;
  }

  .modal-content>div {
    width: 350px;
  }

  .photo {
    flex-basis: 250px;
    /* height: 250px; */
    /* width: 250px; */
  }
}

3. Load the latest jQuery library at the end of the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

4. Show the subscription modal dialog when needed.

$('.modal, .overlay').addClass('active')

5. Close the subscription modal dialog when clicking on the close button or background overlay.

$('.btn-close, .overlay').click(function () {
  $('.modal, .overlay').removeClass('active')
})

---

This awesome jQuery plugin is developed by Amber-Kim. For more Advanced Usages, please check the demo page or visit the official website.