-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
84 lines (75 loc) · 3.46 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="mModal.css">
<title>mModal Demonstration</title>
</head>
<body>
<a href="javascript://" id="open-modal">Full Featured Modal</a>
<a href="javascript://" id="open-modal2">Modal Without Buttons</a>
<a href="javascript://" id="open-modal3">Youtube Modal</a>
<div class="mModal" id="full-modal">
<div class="mModal-content">
<h1 style="margin: 0 0 15px 0;padding: 0;">mModal Demo</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat iaculis felis eu aliquam. Morbi nec
porttitor turpis. Suspendisse sit amet magna eu est interdum efficitur ut sit amet ex. Donec enim nisl, interdum
a ipsum gravida, bibendum congue est. Ut aliquet, ligula quis molestie lobortis, lorem purus cursus neque, non
blandit purus lacus et ex. Donec commodo odio ut odio varius rutrum. In tincidunt quam condimentum, aliquet mi
non, molestie dui. Nulla quis justo tortor. Suspendisse lobortis nisl pulvinar ex lobortis, quis volutpat tortor
congue. Fusce mi tortor, tincidunt sed tempor ac, tempor nec tellus.
</div>
<div class="mModal-buttons">
<a data-mModalCallback="no" href="javascript://" style="background-color: #bdc3c7;color:#000000;">No</a>
<a data-mModalCallback="yes" href="javascript://" style="background-color: #2980b9;">Yes</a>
</div>
</div>
<div class="mModal" id="buttonless-modal">
<div class="mModal-content">
<h1 style="margin: 0 0 15px 0;padding: 0;">mModal Demo</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat iaculis felis eu aliquam. Morbi nec
porttitor turpis. Suspendisse sit amet magna eu est interdum efficitur ut sit amet ex. Donec enim nisl, interdum
a ipsum gravida, bibendum congue est. Ut aliquet, ligula quis molestie lobortis, lorem purus cursus neque, non
blandit purus lacus et ex. Donec commodo odio ut odio varius rutrum. In tincidunt quam condimentum, aliquet mi
non, molestie dui. Nulla quis justo tortor. Suspendisse lobortis nisl pulvinar ex lobortis, quis volutpat tortor
congue. Fusce mi tortor, tincidunt sed tempor ac, tempor nec tellus.
</div>
</div>
<div class="mModal" id="youtube-modal" style="width:1280px;height:720px;">
<div class="mModal-content">
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="mModal.js"></script>
<script type="text/javascript">
$(function () {
$('#open-modal').mModal({
modal: $('#full-modal'),
appearAnimation: 'slide',
disappearAnimation: 'slide',
appearSlideDirection: 'down',
disappearSlideDirection: 'up',
animateResize: true,
closeButton: true,
callbacks: {
yes: function (modal) {
modal.closeModal();
},
no: function (modal) {
modal.closeModal();
}
}
});
$('#open-modal2').mModal({
modal: $('#buttonless-modal'),
closeButton: false
});
$('#open-modal3').mModal({
modal: $('#youtube-modal'),
contentUrl: 'https://www.youtube.com/watch?v=3bEtJgnd86M',
closeButton: false
});
});
</script>
</body>
</html>