-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathoverlay-widget.html
executable file
·102 lines (83 loc) · 3.78 KB
/
overlay-widget.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Overlay Widget</title>
<link rel="shortcut icon" href="public/images/logo.png" type="image/png">
<!-- Bootstrap -->
<link rel="stylesheet" href="public/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="public/css/font-awesome.min.css">
<!-- Style -->
<link rel="stylesheet" href="public/css/main.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="overlay-widget">
<main>
<div class="container">
<h1>Overlay Widget</h1>
<div class="btn-overlay text-center">
<button class="btn btn-success item" data-overlay="1">Overlay 1</button>
<button class="btn btn-success item" data-overlay="2">Overlay 2</button>
</div>
<!-- .btn-overlay -->
<div class="overlay-wrapper" data-overlay-content="1">
<div class="overlay">
<div class="overlay-dialog">
<div class="overlay-header">
<h3>Overlay 1</h3>
<div class="btn-close-overlay">
<i class="fa fa-close"></i>
</div>
</div>
<!-- .overlay-header -->
<div class="overlay-body">
<p>Sit commodo Lorem mollit nostrud. Id eiusmod deserunt incididunt consectetur adipisicing velit
magna ut exercitation elit ullamco labore. Excepteur elit id eiusmod fugiat ad do anim fugiat
fugiat. Esse nostrud ea est minim elit duis in.</p>
</div>
<!-- .overlay-body -->
</div>
<!-- .overlay-dialog -->
</div>
<!-- .overlay -->
</div>
<!-- .overlay-wrapper -->
<div class="overlay-wrapper" data-overlay-content="2">
<div class="overlay">
<div class="overlay-dialog">
<div class="overlay-header">
<h3>Overlay 2</h3>
<div class="btn-close-overlay">
<i class="fa fa-close"></i>
</div>
</div>
<!-- .overlay-header -->
<div class="overlay-body">
<p>Sit commodo Lorem mollit nostrud. Id eiusmod deserunt incididunt consectetur adipisicing velit
magna ut exercitation elit ullamco labore. Excepteur elit id eiusmod fugiat ad do anim fugiat
fugiat. Esse nostrud ea est minim elit duis in.</p>
</div>
<!-- .overlay-body -->
</div>
<!-- .overlay-dialog -->
</div>
<!-- .overlay -->
</div>
<!-- .overlay-wrapper -->
</div>
<!-- .container -->
</main>
<!-- Jquery -->
<script src="public/js/jquery-3.2.1.min.js"></script>
<!-- Tabs Widget -->
<script src="public/js/overlay-widget.js"></script>
</body>
</html>