Responsive jQuery / CSS3 Modal with Blurred Background
File Size: | 2.32 KB |
---|---|
Views Total: | 1362 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
This is a jQuery & CSS3 based animated and responsive modal component that uses SVG filters to blur the background (main content) when the modal popup is triggered.
How to use it:
1. Build the markup structure for the modal popup.
<div class="modal is-active"> <div class="modal__header"> <div class="inner"> <h2>Modal Title</h2> </div> </div> <div class="modal__content"> <div class="inner"> <p>Modal Content</p> </div> </div> <div class="modal__footer"> <div class="inner"> <button class="toggleModal">close</button> </div> </div> </div>
2. Create a SVG filter for the blurred modal background.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <feGaussianBlur stdDeviation="3"></feGaussianBlur> </filter> </svg>
3. Style the modal popup in the CSS.
.modal { display: none; position: fixed; top: 50%; width: 100%; height: auto; margin-top: -150px; background-color: #fff; border-radius: 3px; z-index: 999; box-shadow: 0px 1px 3px 0px #d5d5d5; } @media only screen and (min-width: 650px) { .modal { left: 50%; margin-left: -260px; max-width: 520px; } } .modal.is-active { display: block; -webkit-animation: 1s linear slide; animation: 1s linear slide; } .modal .inner { position: relative; padding: 20px; } .modal__header { border-bottom: 1px solid #e1e1e1; } .modal__footer { text-align: center; } .modal__footer button { display: inline-block; }
4. The core CSS / CSS3 rules for the modal animation and blur effect.
@-webkit-keyframes slide { from { top: 0; } to { top: 50%; } } @keyframes slide { from { top: 0; } to { top: 50%; } } body.is-blurred .wrapper { -webkit-filter: url("#blur"); filter: url("#blur"); /* SVG filters for browser support. */ -webkit-filter: blur(3px); filter: blur(3px); /* works in chrome */ -webkit-transition: -webkit-filter 500ms linear; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
5. Include the necessary jQuery JavaScript library on the webpage.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
6. The jQuery script to toggle CSS classes as the modal is toggled.
$('body').addClass('is-blurred'); $('.toggleModal').on('click', function (event) { event.preventDefault(); $('.modal').toggleClass('is-active'); $('body').toggleClass('is-blurred'); });
This awesome jQuery plugin is developed by Elizabet Oliveira. For more Advanced Usages, please check the demo page or visit the official website.