Simple jQuery/CSS3 Modal Window With Blurred Background Overlay

A simple flat jQuery/CSS3 based modal window that uses CSS3 blur filter to apply a blur effect to the background content after the modal opens.

How to use it:

1. Create the modal elements as follows:

<div class="modal-wrapper">
  <div class="modal">
    <div class="head">
      <a class="btn-close trigger" href="#">
        x
      </a>
    </div>
    <div class="content">
      Modal Content
    </div>
  </div>
</div>

2. Wrap your main content into the container with the CSS class of 'page-wrapper'.

<div class="page-wrapper">
  Main Content Goes Here
</div>

3. Optionally, you can create a trigger button to toggle the modal.

<a class="trigger" href="#">Lanuch</a>

4. Apply the following CSS styles to the modal.

.modal-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(41, 171, 164, 0.8);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.modal-wrapper.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  width: 600px;
  height: 400px;
  display: block;
  margin: 50% 0 0 -300px;
  position: relative;
  top: 50%;
  left: 50%;
  background: #fff;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.modal-wrapper.open .modal {
  margin-top: -200px;
  opacity: 1;
}

.head {
  width: 90%;
  height: 32px;
  padding: 12px 30px;
  overflow: hidden;
  background: #e2525c;
}

.btn-close {
  font-size: 28px;
  display: block;
  float: right;
  color: #fff;
}

.content { padding: 10%; }

5. The main CSS for the blur effect.

.blur-it {
  -webkit-filter: blur(4px);
  filter: blur(4px);
}

6. Include the latest version of jQuery library on the page.

<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script> 

7. Enable the trigger button to open the modal and apply the blur effect to the main content by toggling the CSS classes using jQuery.

$('.trigger').on('click', function() {
  $('.modal-wrapper').toggleClass('open');
  $('.page-wrapper').toggleClass('blur-it');
  return false;
});

---

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