This time I will share jQuery Plugin and tutorial about Blur The Background When Opening A Modal Window, hope it will help you in programming stack.
| File Size: | 5.06 KB |
|---|---|
| Views Total: | 7687 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
“
A minimal fast jQuery based modal window that uses CSS filters to blur the background (main content) when the modal is opened.
How to use it:
1. Create the HTML for the modal window.
1 |
<div class="modal"> |
2 |
<div class="content"> |
3 |
<div class="close"></div> |
4 |
<h1> Hello, World!</h1> |
5 |
<p> <a href="https://www.jqueryscript.net/tags.php?/Modal/">Modal</a> Content Here </p> |
6 |
</div> |
7 |
</div> |
2. The necessary CSS/CSS3 styles for the modal window.
01 |
.modal { |
02 |
position: fixed; |
03 |
top: 0; |
04 |
left: 0; |
05 |
display: flex; |
06 |
width: 100%; |
07 |
height: 100vh; |
08 |
justify-content: center; |
09 |
align-items: center; |
10 |
opacity: 0; |
11 |
visibility: hidden; |
12 |
} |
13 |
14 |
.modal .content { |
15 |
position: relative; |
16 |
padding: 10px; |
17 |
width: 400px; |
18 |
height: 300px; |
19 |
border-radius: 8px; |
20 |
background-color: #fff; |
21 |
box-shadow: rgba(112, 128, 175, 0.2) 0px 16px 24px 0px; |
22 |
transform: scale(0); |
23 |
transition: transform 300ms cubic-bezier(0.57, 0.21, 0.69, 1.25); |
24 |
} |
25 |
26 |
.modal .close { |
27 |
position: absolute; |
28 |
top: 5px; |
29 |
right: 5px; |
30 |
width: 30px; |
31 |
height: 30px; |
32 |
cursor: pointer; |
33 |
border-radius: 8px; |
34 |
background-color: #7080af; |
35 |
clip-path: polygon(0 10%, 10% 0, 50% 40%, 89% 0, 100% 10%, 60% 50%, 100% 90%, 90% 100%, 50% 60%, 10% 100%, 0 89%, 40% 50%); |
36 |
} |
37 |
38 |
.modal.open { |
39 |
opacity: 1; |
40 |
visibility: visible; |
41 |
} |
42 |
.modal.open .content { |
43 |
transform: scale(1); |
44 |
} |
3. Apply the blur effect to any element you’d like to blur on modal open.
1 |
.container.blur { |
2 |
filter: blur(5px); |
3 |
} |
4. Inert the latest version of jQuery JavaScript library (slim build) at the end of the document.
1 |
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" crossorigin="anonymous"></script> |
5. Open the modal and blur the background by add the following CSS classes using jQuery.
1 |
$( '.modal' ).addClass( 'open' ); |
2 |
3 |
if ( $( '.modal' ).hasClass( 'open' ) ) { |
4 |
$( '.container' ).addClass( 'blur' ); |
5 |
} |
6. Enable the close button to dismiss the modal window.
1 |
$( '.close' ).click(function() { |
2 |
$( '.modal' ).removeClass( 'open' ); |
3 |
$( '.cont' ).removeClass( 'blur' ); |
4 |
}); |
This awesome jQuery plugin is developed by Andrej Sharapov. For more Advanced Usages, please check the demo page or visit the official website.
source : jquery.net
