-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
137 lines (114 loc) · 3.43 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Sean Nieuwoudt" />
<meta name="robots" content="all" />
<title>Simplest jQuery Modal Plugin Demo</title>
<link rel="stylesheet" href="css/jquery.modal.css">
<style>
body, html{
background-color:#ecf0f1;
font-family: Georgia, Times, "Times New Roman", serif;
font-size:26px;
text-align:center;
}
a{
color:#00A0C6;
}
a:hover{
color:#13819b;
}
h1{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:66px;
color:#30373C;
padding-top:0px;
margin-top:0;
}
.contain p{
display:block;
margin:0 auto;
width:720px;
color:#666;
padding-bottom:50px;
}
p a.btn{
display:inline-block;
border:4px solid #d8d8d8;
color:#d1d1d1;
text-decoration:none;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
}
p a.btn:hover{
color:#F7656A;
border:4px solid #F7656A;
}
a.logo{
display:block;
text-indent:-9999px;
background:url(img/wixel.png) no-repeat;
width:33px;
height:33px;
margin:100px auto;
}
div.share{
text-align:center;
}
.small-text{
font-size:13px;
}
#hidden-templates{
display:none;
}
</style>
</head>
<body class="demo-page">
<a href="http://wixelhq.com" class="logo" title="Wixel - A custom software development studio">Wixel - A custom software development studio</a>
<h1>Simple jQuery Modal Plugin</h1>
<!-- Inline Dialog Content -->
<div id="firstDialog" class="modal">
<h2>Welcome to the inline modal!</h2>
<p>
This content is embedded directly in the page, so you don't need to worry about loading any dependencies from external sources.
</p>
</div>
<div id="secondDialog" class="modal">
<h2>What does the fox say?!</h2>
<iframe width="550" height="355" src="//www.youtube.com/embed/jofNR_WkoCE" frameborder="0" allowfullscreen></iframe>
</div>
<!-- /Inline Dialog Content -->
<section class="contain">
<p>
We felt that the world needed a really simple & reliable modal plugin without an army of settings, here's how it works:
</p>
<p>
<a href="#" data-modal="#firstDialog" class="open-modal btn" title="Inline Demo 1">Inline Demo 1</a>
<a href="#" data-modal="#secondDialog" class="open-modal btn" title="Inline Demo 2">Inline Demo 2</a>
<a href="#" data-src="pages/ajax-demo.html" class="open-modal btn" title="Ajax Demo">Ajax Demo</a>
<a href="#" data-src="pages/page-that-doesnt-exist.html" class="open-modal btn" title="Ajax Error">Ajax Error</a>
</p>
<p>
<img src="img/browsers.png" alt="Testing on IE, FireFox, Chrome & Safari">
</p>
<p class="small-text">
Please <a href="https://twitter.com/home?status=Checkout%20the%20awesome%20simple%20jQuery%20modal%20plugin%20by%20@wixelhq%20-%20http://wixel.github.io/simplest-modal/">share on Twitter</a>
or <a href="http://github.com/Wixel/simplest-modal">download</a> over at Github.
</p>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery.modal.js?v=1" /></script>
<script type="text/javascript">
$(function(){
$.fn.modal('.open-modal');
});
</script>
</body>
</html>