查看 | 历史 | 提交 | 提交对比
hjg
2024-10-30 8cf23534166c07e711aac2a25911ada317ba01f0
提交 | 用户 | 时间
58d006 1 <!doctype html>
A 2 <html>
3 <head>
4   <meta charset="utf-8">
5   <meta http-equiv="X-UA-Compatible" content="chrome=1">
6   <title>Bootstrap-modal by jschr</title>
7   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
8   <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet" />
9   <link href="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css" rel="stylesheet" />
10 <style>
11   body { 
12     padding-top: 40px; 
13   }
14 </style>
15   <!-- <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" /> -->
16   <link href="css/bootstrap-modal-bs3patch.css" rel="stylesheet" />
17   <link href="css/bootstrap-modal.css" rel="stylesheet" />
18 <style>      
19   .text-center { 
20     text-align: center; 
21   }
22
23   .marketing h1 {
24     font-size: 50px;
25     font-weight: lighter;
26     line-height: 1;
27   }
28
29   .marketing p {
30     font-size: 18px;
31   }
32   </style>
33 </head>
34 <body>
35   <div class="page-container">
36     <div class="container" style="position: relative">
37       <div class="marketing">
38         <h1>Bootstrap-Modal</h1>
39         <p class="muted">Responsive, Stackable, AJAX and more.</p>
40         <iframe style="margin-top: 10px" src="http://ghbtns.com/github-btn.html?user=jschr&repo=bootstrap-modal&type=watch&count=true"
41     allowtransparency="true" frameborder="0" scrolling="0" width="95px" height="20px"></iframe>
42         <iframe style="margin-top: 10px" src="http://ghbtns.com/github-btn.html?user=jschr&repo=bootstrap-modal&type=fork&count=true"
43     allowtransparency="true" frameborder="0" scrolling="0" width="95px" height="20px"></iframe>
44       </div>
45       <br />
46       <div class="row">
47         <div class="col-md-10">
48           
49           <div class="responsive">
50             <h3>Responsive</h3>
51             <pre class="pre-scrollable prettyprint linenums" data-source="#responsive">
52             </pre>
53             <div class="text-center">
54             <button class="demo btn btn-primary btn-lg" data-toggle="modal" href="#responsive">View Demo</button>
55             </div>
56           </div>
57           <br />
58
59           <div class="stackable">
60             <h3>Stackable</h3>
61             <pre class="pre-scrollable prettyprint linenums" data-source="#stack1, #stack2, #stack3">         
62             </pre>
63             <div class="text-center">
64             <button class="demo btn btn-primary btn-lg" data-toggle="modal" href="#stack1">View Demo</button>
65             </div>
66           </div>
67           <br />
68           
69           <!--<div class="dynamic">
70             <h3>Dynamic</h3>
71             <pre class="pre-scrollable prettyprint linenums" data-source="#dynamic">
72             </pre>
73             <div class="text-center">
74             <button class="demo btn btn-primary btn-lg" data-toggle="modal">View Demo</button>
75             </div>
76           </div>
77           <br />-->
78           
79           <div class="ajax" style="position: relative; overflow: hidden">
80             <h3>AJAX (via jQuery.load)</h3>
81             <pre class="pre-scrollable prettyprint linenums" data-source="#ajax">
82             </pre>
83             <div class="text-center">
84             <button class="demo btn btn-primary btn-lg" data-toggle="modal">View Demo</button>
85             </div>
86           </div>
87           <br />
88
89           <div class="static" style="position: relative; overflow: hidden">
90             <h3>Static Background with Animation</h3>
91             <p>The shake animation is included in bootstrap-modal but any animation in <a href="http://daneden.me/animate/">animate.css</a> is supported, just include the css file in your project.</p>
92             <pre class="pre-scrollable prettyprint linenums" data-source="#static">
93             </pre>
94             <div class="text-center">
95             <button class="demo btn btn-primary btn-lg" data-toggle="modal" href="#static">View Demo</button>
96             </div>
97           </div>
98           <br />
99
100           <div class="full-width" style="position: relative; overflow: hidden">
101             <h3>Full Width</h3>
102             <pre class="pre-scrollable prettyprint linenums" data-source="#full-width">
103             </pre>
104             <div class="text-center">
105             <button class="demo btn btn-primary btn-lg" data-toggle="modal" href="#full-width">View Demo</button>
106             </div>
107           </div>
108           <br />
109
110           <div class="long" style="position: relative; overflow: hidden">
111             <h3>Long Modals</h3>
112             <pre class="pre-scrollable prettyprint linenums" data-source="#long">
113             </pre>
114             <div class="text-center">
115             <button class="demo btn btn-primary btn-lg" data-toggle="modal" href="#long">View Demo</button>
116             </div>
117           </div>
118           <br />
119
120         </div>
121       </div>
122     </div>
123     
124 <!-- Modal Definitions (tabbed over for <pre>) -->
125 <div id="responsive" class="modal fade" tabindex="-1" data-width="760" style="display: none;">
126   <div class="modal-header">
127     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
128     <h4 class="modal-title">Responsive</h4>
129   </div>
130   <div class="modal-body">
131     <div class="row">
132       <div class="col-md-6">
133         <h4>Some Input</h4>
134         <p><input class="form-control" type="text" /></p>
135         <p><input class="form-control" type="text" /></p>
136         <p><input class="form-control" type="text" /></p>
137         <p><input class="form-control" type="text" /></p>
138         <p><input class="form-control" type="text" /></p>
139         <p><input class="form-control" type="text" /></p>
140         <p><input class="form-control" type="text" /></p>
141       </div>
142       <div class="col-md-6">
143         <h4>Some More Input</h4>
144         <p><input class="form-control" type="text" /></p>
145         <p><input class="form-control" type="text" /></p>
146         <p><input class="form-control" type="text" /></p>
147         <p><input class="form-control" type="text" /></p>
148         <p><input class="form-control" type="text" /></p>
149         <p><input class="form-control" type="text" /></p>
150         <p><input class="form-control" type="text" /></p>
151       </div>
152     </div>
153   </div>
154   <div class="modal-footer">
155     <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
156     <button type="button" class="btn btn-primary">Save changes</button>
157   </div>
158 </div>
159
160 <div id="full-width" class="modal container fade" tabindex="-1" style="display: none;">
161   <div class="modal-header">
162     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
163     <h4 class="modal-title">Full Width</h4>
164   </div>
165   <div class="modal-body">
166     <p>This modal will resize itself to the same dimensions as the container class.</p>
167     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin ipsum ac ante fermentum suscipit. In ac augue non purus accumsan lobortis id sed nibh. Nunc egestas hendrerit ipsum, et porttitor augue volutpat non. Aliquam erat volutpat. Vestibulum scelerisque lobortis pulvinar. Aenean hendrerit risus neque, eget tincidunt leo. Vestibulum est tortor, commodo nec cursus nec, vestibulum vel nibh. Morbi elit magna, ornare placerat euismod semper, dignissim vel odio. Phasellus elementum quam eu ipsum euismod pretium.</p>
168   </div>
169   <div class="modal-footer">
170     <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
171     <button type="button" class="btn btn-primary">Save changes</button>
172   </div>
173 </div>
174
175 <div id="stack1" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
176   <div class="modal-header">
177     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
178     <h4 class="modal-title">Stack One</h4>
179   </div>
180   <div class="modal-body">
181     <p>One fine body…</p>
182     <p>One fine body…</p>
183     <p>One fine body…</p>
184     <input class="form-control" type="text" data-tabindex="1" />
185     <input class="form-control" type="text" data-tabindex="2" />
186     <button class="btn btn-default" data-toggle="modal" href="#stack2">Launch modal</button>
187   </div>
188   <div class="modal-footer">
189     <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
190     <button type="button" class="btn btn-primary">Ok</button>
191   </div>
192 </div>
193
194 <div id="stack2" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
195   <div class="modal-header">
196     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
197     <h4 class="modal-title">Stack Two</h4>
198   </div>
199   <div class="modal-body">
200     <p>One fine body…</p>
201     <p>One fine body…</p>
202     <input class="form-control" type="text" data-tabindex="1" />
203     <input class="form-control" type="text" data-tabindex="2" />
204     <button class="btn btn-default" data-toggle="modal" href="#stack3">Launch modal</button>
205   </div>
206   <div class="modal-footer">
207     <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
208     <button type="button" class="btn btn-primary">Ok</button>
209   </div>
210 </div>
211
212 <div id="stack3" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
213   <div class="modal-header">
214     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
215     <h4 class="modal-title">Stack Three</h4>
216   </div>
217   <div class="modal-body">
218     <p>One fine body…</p>
219     <input class="form-control" type="text" data-tabindex="1" />
220     <input class="form-control" type="text" data-tabindex="2" />
221   </div>
222   <div class="modal-footer">
223     <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
224     <button type="button" class="btn btn-primary">Ok</button>
225   </div>
226 </div>
227
228 <div id="static" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false" style="display: none;">
229   <div class="modal-body">
230     <p>Would you like to continue with some arbitrary task?</p>
231   </div>
232   <div class="modal-footer">
233     <button type="button" data-dismiss="modal" class="btn btn-default">Cancel</button>
234     <button type="button" data-dismiss="modal" class="btn btn-primary">Continue Task</button>
235   </div>
236 </div>
237
238 <div id="long" class="modal fade" tabindex="-1" data-replace="true" style="display: none;">
239   <div class="modal-header">
240     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
241     <h4 class="modal-title">A Fairly Long Modal</h4>
242   </div>
243   <div class="modal-body">
244     <button class="btn btn-default" data-toggle="modal" href="#notlong" style="position: absolute; top: 50%; right: 12px">Not So Long Modal</button>
245     <img style="height: 800px" src="http://i.imgur.com/KwPYo.jpg" />
246   </div>
247   <div class="modal-footer">
248     <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
249   </div>
250 </div>
251
252 <div id="notlong" class="modal fade" tabindex="-1" data-replace="true" style="display: none;">
253   <div class="modal-header">
254     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
255     <h4 class="modal-title">Not That Long</h4>
256   </div>
257   <div class="modal-body">
258     <button class="btn btn-default" data-toggle="modal" href="#verylong" style="position: absolute; top: 50%; right: 12px">Very Long Modal</button>
259     <div style="height: 400px; overflow: hidden;">
260       <img style="height: 800px" src="http://i.imgur.com/KwPYo.jpg" />
261     </div>
262   </div>
263   <div class="modal-footer">
264     <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
265   </div>
266 </div>
267
268 <div id="verylong" class="modal fade" tabindex="-1" data-replace="true" style="display: none;">
269   <div class="modal-header">
270     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
271     <h4 class="modal-title">A Very Long</h4>
272   </div>
273   <div class="modal-body">
274     <div style="height: 1000px; overflow: hidden;">
275       <img style="height: 800px" src="http://i.imgur.com/KwPYo.jpg" />
276     </div>
277   </div>
278   <div class="modal-footer">
279     <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
280   </div>
281 </div>
282
283 <div id="ajax-modal" class="modal fade" tabindex="-1" style="display: none;"></div>
284     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
285     <script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.js"></script>
286     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script>
287     <script src="js/bootstrap-modalmanager.js"></script>
288     <script src="js/bootstrap-modal.js"></script>
289 <script type="text/javascript">
290
291   $(function(){
292
293     $.fn.modal.defaults.spinner = $.fn.modalmanager.defaults.spinner = 
294       '<div class="loading-spinner" style="width: 200px; margin-left: -100px;">' +
295         '<div class="progress progress-striped active">' +
296           '<div class="progress-bar" style="width: 100%;"></div>' +
297         '</div>' +
298       '</div>';
299
300     $.fn.modalmanager.defaults.resize = true;
301
302     $('[data-source]').each(function(){
303       var $this = $(this),
304         $source = $($this.data('source'));
305
306       var text = [];
307       $source.each(function(){
308         var $s = $(this);
309         if ($s.attr('type') == 'text/javascript'){
310           text.push($s.html().replace(/(\n)*/, ''));
311         } else {
312           text.push($s.clone().wrap('<div>').parent().html());
313         }
314       });
315       
316       $this.text(text.join('\n\n').replace(/\t/g, '    '));
317     });
318
319     prettyPrint();
320   });
321 </script>
322     
323
324 <script id="dynamic" type="text/javascript">
325 $('.dynamic .demo').click(function(){
326   var tmpl = [
327     // tabindex is required for focus
328     '<div class="modal hide fade" tabindex="-1">',
329       '<div class="modal-header">',
330         '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>',
331         '<h4 class="modal-title">Modal header</h4>', 
332       '</div>',
333       '<div class="modal-body">',
334         '<p>Test</p>',
335       '</div>',
336       '<div class="modal-footer">',
337         '<a href="#" data-dismiss="modal" class="btn btn-default">Close</a>',
338         '<a href="#" class="btn btn-primary">Save changes</a>',
339       '</div>',
340     '</div>'
341   ].join('');
342   
343   $(tmpl).modal();
344 });
345 </script>
346
347 <script id="ajax" type="text/javascript">
348
349 var $modal = $('#ajax-modal');
350
351 $('.ajax .demo').on('click', function(){
352   // create the backdrop and wait for next modal to be triggered
353   $('body').modalmanager('loading');
354
355   setTimeout(function(){
356      $modal.load('modal_ajax_test.html', '', function(){
357       $modal.modal();
358     });
359   }, 1000);
360 });
361
362 $modal.on('click', '.update', function(){
363   $modal.modal('loading');
364   setTimeout(function(){
365     $modal
366       .modal('loading')
367       .find('.modal-body')
368         .prepend('<div class="alert alert-info fade in">' +
369           'Updated!<button type="button" class="close" data-dismiss="alert">&times;</button>' +
370         '</div>');
371   }, 1000);
372 });
373
374 </script> 
375   </body>
376 </html>