-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
173 lines (167 loc) · 9.57 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html>
<head>
<base href="/puymodals/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Aditya's PUYMODALS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="http://pateladitya.com">Aditya Patel</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="docs.html">Documentation</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center ">
<h1 class="text-primary puy-head">PUY Modals</h1>
<p class="puy-head">PUY Modals is a javascript library function which can be used to generate Bootstrap 4 Modal Popups dynamically.</p>
<p class="puy-head-2">On this page I am demonstrating several types of popups that are possible with PUYMODALS. The combinations are unlimited.</p>
<div class="h4">Source Code: <a href="https://github.com/aybhalala/puymodals" target="_blank" title="Source code on Github">https://github.com/aybhalala/puymodals</a></div>
</div>
</div>
<div class="row my-3">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<h5>Simple Modal with heading and message</h5>
</div>
<div class="card-body">
<p><strong>Initialization code</strong></p>
<p class="card-text"><code data-lang="html">puyModal({title:'Test Title',heading:'Heading',message:'<p>This is sample message.</p>'})</code></p>
<p>Most of the attributes can be HTML content.</p>
<button type="button" class="btn btn-primary" onclick="puyModal({title:'Test Title',heading:'Heading',message:'<p>This is sample message.</p>'})">Click to See!</button>
</div>
</div>
</div>
</div>
<div class="row my-3">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<h5>Modal with heading and message and icon</h5>
</div>
<div class="card-body">
<p><strong>Initialization code</strong></p>
<p class="card-text"><code data-lang="html">puyModal({title:'Test Title',heading:'Heading',message:'This is sample message.',icon: 'fab fa-js-square fa-3x'})</code></p>
<p>Most of the attributes can be HTML content.</p>
<button type="button" class="btn btn-primary" onclick="puyModal({title:'Test Title',heading:'Heading',message:'This is sample message.',icon: 'fab fa-js-square fa-3x'})">Click to See!</button>
</div>
</div>
</div>
</div>
<div class="row my-3">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<h5>Showing/Hiding Header and Footer of Modal</h5>
</div>
<div class="card-body">
<p><strong>Different Possible combinations</strong></p>
<div class="border border-info p-3 m-1">
<p class="card-text"><code data-lang="html">puyModal({title:'Test Title',heading:'Heading',message:'<p>This is sample message.</p>,showHeader: false'})</code></p>
<p>Hiding the header.</p>
<button type="button" class="btn btn-primary" onclick="puyModal({title:'Test Title',heading:'Heading',message:'<p>This is sample message.</p>',showHeader: false})">Click to See!</button>
</div>
<div class="border border-info p-3 m-1">
<p class="card-text mt-3"><code data-lang="html">puyModal({title:'Test Title',heading:'Heading',message:'<p>This is sample message.</p>,showFooter: true'})</code></p>
<p>Showing the footer.</p>
<button type="button" class="btn btn-primary" onclick="puyModal({title:'Test Title',heading:'Heading',message:'<p>This is sample message.</p>',showFooter: true})">Click to See!</button>
</div>
<div class="border border-info p-3 m-1">
<p class="card-text mt-3"><code data-lang="html">puyModal({title:'Test Title',heading:'Heading',message:'<p>This is sample message.</p>,showHeader: false, showFooter: true'})</code></p>
<p>Hiding the header and showing the footer.</p>
<button type="button" class="btn btn-primary" onclick="puyModal({title:'Test Title',heading:'Heading',message:'<p>This is sample message.</p>',showHeader: false, showFooter: true})">Click to See!</button>
</div>
</div>
</div>
</div>
</div>
<div class="row my-3">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<h5>Load a page using jQuery's load function</h5>
</div>
<div class="card-body">
<p><strong>Initialization code</strong></p>
<p class="card-text"><code data-lang="html">puyModal({title:'Load Test',loadPage:'test.html'})</code></p>
<p>It is recommended to use a page on your website for loadPage function. For external resources use Iframe</p>
<button type="button" class="btn btn-primary" onclick="puyModal({title:'Load Test',loadPage:'test.html'})">Click to See!</button>
</div>
</div>
</div>
</div>
<div class="row my-3">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<h5>Load an Iframe inside the Modal's Body</h5>
</div>
<div class="card-body">
<p><strong>Initialization code</strong></p>
<p class="card-text"><code data-lang="html">puyModal({title:'Iframe Test',type:'iframe',iframe:'http://pateladitya.com'})</code></p>
<p>Using Iframe for loading external content</p>
<button type="button" class="btn btn-primary" onclick="puyModal({title:'Iframe Test',type:'iframe',iframe:'http://pateladitya.com'})">Click to See!</button>
</div>
</div>
</div>
</div>
<div class="row my-3">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<h5>Video Popup</h5>
</div>
<div class="card-body">
<p><strong>Initialization code</strong></p>
<p class="card-text"><code data-lang="html">puyModal({title:'Video Test',type:'video',videoSource:'youtube',embedTag:'_7XJenTvR34'})</code></p>
<p>Using Iframe loading external content</p>
<button type="button" class="btn btn-primary" onclick="puyModal({title:'Video Test',type:'video',videoSource:'youtube',embedTag:'YE7VzlLtp-4'})">Youtube</button>
<button type="button" class="btn btn-primary" onclick="puyModal({title:'Video Test',type:'video',videoSource:'vimeo',embedTag:'1084537'})">Vimeo</button>
</div>
</div>
</div>
</div>
<div class="row my-3">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<h5>Video Popup Using class .puyVideo and element attributes</h5>
</div>
<div class="card-body">
<p><strong>Initialization code</strong></p>
<p class="card-text"><code data-lang="html"><button type="button" class="btn btn-primary puyVideo" data-href="YE7VzlLtp-4" data-videoSource="youtube" title="Big Buck Bunny">Youtube</button></code></p>
<p class="card-text"><code data-lang="html"><a class="btn btn-primary puyVideo" href="1084537" data-videoSource="vimeo" title="Big Buck Bunny">Vimeo</a></code></p>
<p>Using class name on buttons, anchors or any other elements to initiate a Video Popup</p>
<button type="button" class="btn btn-primary puyVideo" data-href="YE7VzlLtp-4" data-videoSource="youtube" title="Big Buck Bunny">Youtube</button>
<a class="btn btn-primary puyVideo" href="1084537" data-videoSource="vimeo" title="Big Buck Bunny">Vimeo</a>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/puymodals.js" charset="utf-8"></script>
</body>
</html>