This time I will share jQuery Plugin and tutorial about Awesome Swing Out Modal with jQuery and CSS3, hope it will help you in programming stack.
| File Size: | 4.85 KB |
|---|---|
| Views Total: | 4701 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
This is jQuery & CSS3 based modal component that helps you create a beautiful, responsive modal popup with an awesome swing out animation when triggered.
How to use it:
1. Include the Font Awesome 4 for modal close icon (OPTIONAL).
1 |
<link rel="stylesheet" href="font-awesome.min.css"> |
2. Create the modal with a trigger button on the webpage.
01 |
<div class="container"> |
02 |
<div class="btn open"> |
03 |
Lanuch a modal |
04 |
</div> |
05 |
<div class="circle"></div> |
06 |
<div class="modal"> |
07 |
<div class="modal-container"> |
08 |
<div class="title"> |
09 |
<a href="https://www.jqueryscript.net/tags.php?/Modal/">Modal</a> Title |
10 |
<i class="fa fa-times close"></i> |
11 |
</div> |
12 |
<div class="modal-content"> |
13 |
Modal Content |
14 |
</div> |
15 |
<div class="btn close"> |
16 |
Close the modal |
17 |
</div> |
18 |
</div> |
19 |
</div> |
20 |
</div> |
3. Style the modal.
01 |
.btn.open, .modal .btn.close, .circle, .modal { |
02 |
position: absolute; |
03 |
top: 50%; |
04 |
left: 50%; |
05 |
transform: translate(-50%, -50%); |
06 |
} |
07 |
08 |
.modal { |
09 |
background: #ECECEC; |
10 |
border-radius: 3px; |
11 |
box-shadow: 0 8px 0 0 #bebebe; |
12 |
padding: 0; |
13 |
} |
14 |
15 |
.modal .title { |
16 |
color: #4E9CFF; |
17 |
font-size: 28px; |
18 |
font-weight: bold; |
19 |
margin-top: -5px; |
20 |
padding: 10px 15px 10px 20px; |
21 |
border-bottom: 5px solid #4E9CFF; |
22 |
margin: -15px -20px 12px; |
23 |
} |
24 |
25 |
.modal .title i { |
26 |
float: right; |
27 |
color: #1e1e1e; |
28 |
opacity: .3; |
29 |
transition: all .2s ease; |
30 |
cursor: pointer; |
31 |
} |
32 |
33 |
.modal .title i:hover { opacity: .5; } |
34 |
35 |
.modal .modal-content { |
36 |
float: none; |
37 |
clear: both; |
38 |
font-size: 16px; |
39 |
} |
40 |
41 |
.modal .modal-content { line-height: 1.3; } |
42 |
43 |
.modal .btn.close { |
44 |
top: 78%; |
45 |
height: 50px; |
46 |
padding: 15.5px; |
47 |
font-size: 24px; |
48 |
background: #6dadff; |
49 |
box-shadow: 0 8px 0 0 #4E9CFF; |
50 |
cursor: pointer; |
51 |
transition: all .3s ease; |
52 |
} |
53 |
54 |
.modal .btn.close:hover { |
55 |
box-shadow: 0 5px 0 0 #4496ff; |
56 |
margin-top: 3px; |
57 |
} |
58 |
59 |
.modal .btn.close:active { |
60 |
box-shadow: 0 0 0 0 #2f8bff; |
61 |
margin-top: 8px; |
62 |
} |
63 |
64 |
.modal-container { display: none; } |
4. Create the modal swing out animation using CSS3 transitions and @keyframes.
01 |
.circle { |
02 |
border-radius: 100%; |
03 |
height: 2px; |
04 |
width: 2px; |
05 |
background: #F47265; |
06 |
opacity: .3; |
07 |
z-index: 2; |
08 |
transition: all .8s ease; |
09 |
} |
10 |
11 |
.in { animation: in 1s ease; } |
12 |
13 |
.out { animation: out 1s ease; } |
