This time I will share jQuery Plugin and tutorial about Minimal Responsive iFrame Popup Plugin For jQuery – WMBox, hope it will help you in programming stack.
| File Size: | 3.84 KB |
|---|---|
| Views Total: | 13750 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
WMBox is an ultra-light (~1kb) jQuery plugin which lets you create a responsive modal popup to display external content like Youtube or Vimeo videos.
How to use it:
1. Include the jQuery WMBox plugin’s script after the jQuery JavaScript library as shown below.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="js/wmBox.js"></script> |
2. Create a trigger element to open the modal popup and specify the external content to be displayed in the iframe using data-popup attribute.
1 |
<a class="wmBox" href="#" |
3 |
Play The Video |
4 |
</a> |
3. Initialize the plugin and you’re done.
1 |
$.wmBox(); |
4. The required CSS to style the modal popup.
01 |
.wmBox_overlay { |
02 |
position: fixed; |
03 |
width: 100%; |
04 |
height: 100%; |
05 |
display: none; |
06 |
top: 0; |
07 |
left: 0; |
08 |
background: rgba(0,0,0,0.5); |
09 |
} |
10 |
11 |
.wmBox_centerWrap { |
12 |
display: table; |
13 |
position: absolute; |
14 |
width: 100%; |
15 |
height: 100%; |
16 |
} |
17 |
18 |
.wmBox_centerer { |
19 |
display: table-cell; |
20 |
vertical-align: middle; |
21 |
} |
22 |
23 |
.wmBox_centerer iframe { |
24 |
width: 95%; |
25 |
display: table; |
26 |
margin: 0 auto; |
27 |
position: relative; |
28 |
} |
29 |
30 |
.wmBox_contentWrap { |
31 |
width: 50%; |
32 |
margin: 0 auto; |
33 |
position: relative; |
34 |
} |
35 |
36 |
.wmBox_scaleWrap { |
37 |
position: relative; |
38 |
height: 0; |
39 |
padding-top: 20px; |
40 |
padding-bottom: 56.25%; |
41 |
width: 100%; |
42 |
} |
43 |
44 |
.wmBox_centerer iframe { |
45 |
position: absolute; |
46 |
top: 0; |
47 |
border: 0; |
48 |
outline: 0; |
49 |
box-shadow: 0px 0px 10px rgba(0,0,0,0.5); |
50 |
left: 0; |
51 |
width: 100%; |
52 |
height: 100%; |
53 |
} |
54 |
55 |
.wmBox_closeBtn { |
56 |
z-index: 2; |
57 |
position: relative; |
58 |
margin-top: -40px; |
59 |
} |
60 |
61 |
.wmBox_closeBtn p { |
62 |
line-height: 0; |
63 |
margin: 0; |
64 |
padding: 0.5em 0 0.75em; |
65 |
color: #FFF; |
66 |
background: #000; |
67 |
width: 1.3em; |
68 |
font-size: 25px; |
69 |
border-radius: 100%; |
70 |
text-align: center; |
71 |
font-family: Verdana, serif; |
72 |
position: relative; |
73 |
bottom: -0.5em; |
74 |
right: -0.5em; |
75 |
cursor: pointer; |
76 |
float: right; |
77 |
box-shadow: 0px 0px 10px rgba(0,0,0,0.5); |
78 |
transition: color 0.2s ease-out, background 0.2s ease-out; |
79 |
} |
80 |
81 |
.wmBox_closeBtn p:hover { |
82 |
background: #FFF; |
83 |
color: #000; |
84 |
} |
Change log:
2017-03-27
- Minimized HTML reconstruction
This awesome jQuery plugin is developed by willmurdoch. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
