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