-
Notifications
You must be signed in to change notification settings - Fork 36
/
index.html
418 lines (353 loc) · 18.4 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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<title>Modal Popover</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="lib/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="lib/bootstrap-3.3.5/docs.css" rel="stylesheet">
<link href="lib/prettify.css" rel="stylesheet">
</head>
<body style="padding-top: 40px; padding-bottom: 100px">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Modal Popovers</a>
<ul class="nav navbar-nav">
<li class="active"><a href="http://scruffles.github.com/BootstrapModalPopover/">Home</a></li>
<li><a href="https://github.com/scruffles/BootstrapModalPopover">Download from GitHub</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="row">
<section>
<div class="page-header">
<h1>Modal Popovers
<small>bootstrap-modal-popover.js</small>
</h1>
</div>
<a href="#popupDemo" role="button" class="btn btn-primary btn-large" data-toggle="modal-popover" data-placement="right">Demo</a>
<h3>About Modal Popovers</h3>
<a href="http://twitter.github.com/bootstrap/">Twitter Boostrap</a> provides both modals and popovers, but sometimes you need a feature set that falls somewhere between the two.
Modals provide a nice way to provide extra details without navigating away from the page completely, but they hide your current context
and feel a bit 90's. Popovers are essentially stylish tooltips which provide a little extra information without losing context. However,
they were designed to display static text making it difficult to add listeners to any components in the content. The mechanisms used
to show and hide popovers are much more appropriate for tooltips than for dialogs.
<h3>Versions</h3>
<ul>
<li>Version 1.0 was tested against bootstrap 2.1.1</li>
<li>Version 2.x is designed to work with bootstrap 3.3.5</li>
</ul>
Please feel free to submit pull requests if you find an issue.
<h2>Examples</h2>
<h3>Positioning</h3>
<div class="bs-docs-example">
<a href="#popupBottom" role="button" class="btn btn-default" data-toggle="modal-popover" data-placement="bottom">Bottom</a>
<a href="#popupTop" role="button" class="btn btn-default" data-toggle="modal-popover" data-placement="top">Top</a>
<a href="#popupLeft" role="button" class="btn btn-default" data-toggle="modal-popover" data-placement="left">Left</a>
<a href="#popupRight" role="button" class="btn btn-default" data-toggle="modal-popover" data-placement="right">Right</a>
</div>
<pre class="prettyprint linenums">
<!-- Button to launch modal popover -->
<a href="#popupBottom" role="button" class="btn btn-default" data-toggle="modal-popover" data-placement="bottom">Bottom</a>
<!-- Define content -->
<div id="popupBottom" class="popover">
<div class="arrow"></div>
<h3 class="popover-title">Bottom</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
<a href="#" class="btn btn-default helloWorld">Click me</a>
</p>
</div>
</div></pre>
<h3>The Target can be Absolute Positioned</h3>
<p>When the target is absolute positioned, place the modal directly after the trigger in the dom and set the modal-position option to 'relative':</p>
<div style="position: relative; height: 140px">
<a href="#near" role="button" class="btn btn-default" data-modal-position="relative" data-toggle="modal-popover" data-placement="bottom" style="position: absolute; left: 50px; top: 50px;">Absolute</a>
<div id="near" class="popover">
<div class="arrow"></div>
<h3 class="popover-title">Bottom</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean
eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum.
<a href="#" class="btn btn-default helloWorld">Click me</a>
</p>
</div>
</div>
</div>
<h2>Usage</h2>
<p>Please note the dialog currently needs to be immediately inside the body of the document. (see <a href="https://github.com/scruffles/BootstrapModalPopover/issues/3">Issue #3</a>)</p>
<h3>Via data attributes</h3>
<p>Activate a modal popover without writing JavaScript. Set <code>data-toggle="modal-popover"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific
modal to toggle.
</p>
<pre class="prettyprint linenums"><button type="button" data-toggle="modal-popover" data-target="#myModal">Launch modal</button></pre>
<h3>Via JavaScript</h3>
<p>Call a modal with id <code>myModal</code> with a single line of JavaScript:</p>
<pre class="prettyprint linenums">$('#myModal').modalPopover(options)</pre>
<h3>Demo</h3>
<p>A <a href="http://jsfiddle.net/scruffles/6JSYj/">full demo</a> of the method and events below is available on JSFiddle.</p>
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 50px;">type</th>
<th style="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>target</td>
<td>selector</td>
<td>none (required)</td>
<td>
<p>Specifies the content for the modal popup.</p>
<p>Bootstrap's Modal doesn't need to reference a second element, because it has no context. It's <i>this</i> is the dialog.
Bootstrap's Popover doesn't need to reference a second element because the content is just text. It's <i>this</i> is the context for the popup (the element the tooltip applies to).
Motal Popover needs both a context (specified by the 'target' option) <i>and</i> content (<i>this</i>).
</p>
<p>
The target can be specified in several ways: </p>
<ul>
<li>in the options object when configuring via javascript</li>
<li>using data-target on the context object (see the 'remote' option for an example)</li>
<li>using the href attribute on the context object (see the 'remote' option for an example)</li>
</ul>
</td>
</tr>
<tr>
<td>placement</td>
<td>string|function</td>
<td>'right'</td>
<td>how to position the popover - top | bottom | left | right</td>
</tr>
<tr>
<td>modal-position</td>
<td>string</td>
<td>'body'</td>
<td>Specifies where the modal is in the dom. The value 'body' specifies the modal is directly within the body element. The value 'relative' specifies the modal is right after the trigger in the dom. The relative setting is useful for absolutely positioned targets.</td>
</tr>
<tr>
<td>backdrop</td>
<td>boolean</td>
<td>true</td>
<td>Inherited from Bootstrap's Modal. The backdrop is the area behind the popover that when clicked, closes the dialog. Unlike modals, the popover's backdrop isn't visible. When false, the popover must be closed pragmatically.
</td>
</tr>
<tr>
<td>keyboard</td>
<td>boolean</td>
<td>true</td>
<td>Closes the modal when escape key is pressed. As with Bootstrap's Modal, this only works if the dialog has focusable components.</td>
</tr>
<!-- todo -->
<!--
<tr>
<td>show</td>
<td>boolean</td>
<td>true</td>
<td>Shows the modal when initialized.</td>
</tr>
-->
<tr>
<td>remote</td>
<td>path</td>
<td>false</td>
<td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.popover-content</code>:</p>
<div class="bs-docs-example">
<a href="#popupExternal" class="btn btn-default" data-toggle="modal-popover" data-remote="externalContent.html">Show External</a>
</div>
<pre class="prettyprint linenums"><code><a href="#popupExternal" class="btn btn-default" data-toggle="modal-popover" data-remote="externalContent.html">Show External</a></code></pre>
<p>If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
<div class="bs-docs-example">
<a href="externalContent.html" class="btn btn-default" data-target="#popupExternal2" data-toggle="modal-popover">Show External</a>
</div>
<pre class="prettyprint linenums"><code><a href="externalContent.html" class="btn btn-default" data-target="#popupExternal" data-toggle="modal-popover">Show External</a></code></pre>
</td>
</tr>
<tr>
<td>placement</td>
<td>string</td>
<td>right</td>
<td>
Specifies where the popup appears relative to the target. Valid values are left, right, top & bottom. see demos above
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="span12">
<h3>Methods</h3>
<h4>.modalPopover(options)</h4>
<p>
Initializes your content as a modalPopover. Accepts an optional options <code>object</code>.
</p>
<pre class="prettyprint linenums">
$('#dialog').modalPopover({
target: '#target'
});</pre>
<p>
Alternatively, the <code>data-toggle="modal-popover"</code> tag can be used on either the dialog or its target.
</p>
<h4>.modalPopover('toggle')</h4>
<p>
Manually toggles a modal.
</p>
<pre class="prettyprint linenums">$('#dialog').modalPopover('toggle')</pre>
<h4>.modalPopover('show')</h4>
<p>Manually opens a modal.</p>
<pre class="prettyprint linenums">$('#dialog').modalPopover('show')</pre>
<h4>.modalPopover('hide')</h4>
<p>Manually hides a modal.</p>
<pre class="prettyprint linenums">$('#dialog').modalPopover('hide')</pre>
</div>
</div>
<div class="row">
<div class="span12">
<h3>Events</h3>
<p>Several events are exposed to Modal Popover:</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>show</td>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
</tr>
<tr>
<td>shown</td>
<td>This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).</td>
</tr>
<tr>
<td>hide</td>
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
</tr>
<tr>
<td>hidden</td>
<td>This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).</td>
</tr>
</tbody>
</table>
<pre class="prettyprint linenums">
$('#myModal').on('hidden', function () {
// do something...
})
</pre>
</div>
</div>
<h2>Related Projects</h2>
Before starting this project, I used <a href="http://www.leecarmichael.com/bootstrapx-clickover/examples.html">boostrapx-clickvoer</a>.
It achieves the same results, but with a different api. It subclasses popover rather than modal, so the contents of the popover
are based on text rather than an existing dom element. Because of this, the only way to add listeners or augment the html using
javascript is to listen to each popup event, re-adding the listeners there. Also, the options are inherited from popover, and
make more sense for tooltips than editable forms.
</section>
</div>
</div>
<div>
<!--
Demo popovers
-->
<div id="popupDemo" class="popover" style="width: 300px">
<div class="arrow"></div>
<h3 class="popover-title">Demo Modal Popover</h3>
<div class="popover-content">
<p>Edit some data related to this context:
<form>
<div class="input-append">
<input type="text" class="input-medium" placeholder="[email protected]">
<a href="#" class="btn btn-default helloWorld">subscribe</a>
</div>
</form>
</p>
</div>
</div>
<div id="popupBottom" class="popover">
<div class="arrow"></div>
<h3 class="popover-title">Bottom</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean
eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum.
<a href="#" class="btn btn-default helloWorld">Click me</a>
</p>
</div>
</div>
<div id="popupTop" class="popover">
<div class="arrow"></div>
<h3 class="popover-title">Top</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean
eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum.
<a href="#" class="btn btn-default helloWorld">Click me</a>
</p>
</div>
</div>
<div id="popupLeft" class="popover">
<div class="arrow"></div>
<h3 class="popover-title">Left</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean
eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum.
<a href="#" class="btn btn-default helloWorld">Click me</a>
</p>
</div>
</div>
<div id="popupRight" class="popover">
<div class="arrow"></div>
<h3 class="popover-title">Right</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean
eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum.
<a href="#" class="btn btn-default helloWorld">Click me</a>
</p>
</div>
</div>
<div id="popupExternal" class="popover">
<div class="arrow"></div>
<h3 class="popover-title">External Data</h3>
<div class="popover-content">
<p>loading...</p>
</div>
</div>
<div id="popupExternal2" class="popover">
<div class="arrow"></div>
<h3 class="popover-title">External Data</h3>
<div class="popover-content">
<p>loading...</p>
</div>
</div>
<div id="javaScriptApi" class="popover">
<div class="arrow"></div>
<h3 class="popover-title">JavaScript Access</h3>
<div class="popover-content">
<p>Loaded using JavaScript</p>
</div>
</div>
</div>
<script type="text/javascript" src="lib/prettify.js"></script>
<script type="text/javascript" src="lib/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="lib/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="src/bootstrap-modal-popover.js"></script>
<script type="text/javascript">
$(function () {
$('.helloWorld').click(function () {
alert('hello world');
});
prettyPrint();
$('#javaScriptApi').modalPopover({target:'#methodTarget', placement:'left'});
});
</script>
</body>
</html>