diff options
Diffstat (limited to 'docs/javascript.html')
| -rw-r--r-- | docs/javascript.html | 96 |
1 files changed, 55 insertions, 41 deletions
diff --git a/docs/javascript.html b/docs/javascript.html index 8f941f278..cc8e6961b 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -192,7 +192,7 @@ $('#myModal').on('show', function (e) { <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> - <h3 class="modal-title">Modal header</h3> + <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> @@ -208,16 +208,22 @@ $('#myModal').on('show', function (e) { </div> <pre class="prettyprint linenums"> <div class="modal fade"> - <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> - <h3>Modal header</h3> - </div> - <div class="modal-body"> - <p>One fine body…</p> - </div> - <div class="modal-footer"> - <a href="#" class="btn">Close</a> - <a href="#" class="btn btn-primary">Save changes</a> + <div class="modal-dialog"> + <div class="modal-content"> + + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> + <h4 class="modal-title">Modal title</h4> + </div> + <div class="modal-body"> + <p>One fine body…</p> + </div> + <div class="modal-footer"> + <a href="#" class="btn">Close</a> + <a href="#" class="btn btn-primary">Save changes</a> + </div> + + </div> </div> </div> </pre> @@ -226,36 +232,44 @@ $('#myModal').on('show', function (e) { <p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p> <!-- sample modal content --> <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> - <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> - <h3 id="myModalLabel">Modal Heading</h3> - </div> - <div class="modal-body"> - <h4>Text in a modal</h4> - <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p> - - <h4>Popover in a modal</h4> - <p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p> - - <h4>Tooltips in a modal</h4> - <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p> - - <hr> - - <h4>Overflowing text to show optional scrollbar</h4> - <p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - </div> - <div class="modal-footer"> - <button class="btn" data-dismiss="modal">Close</button> - <button class="btn btn-primary">Save changes</button> - </div> - </div> + + <div class="modal-dialog"> + <div class="modal-content"> + + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h4 class="modal-title" id="myModalLabel">Modal Heading</h4> + </div> + <div class="modal-body"> + <h4>Text in a modal</h4> + <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p> + + <h4>Popover in a modal</h4> + <p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p> + + <h4>Tooltips in a modal</h4> + <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p> + + <hr> + + <h4>Overflowing text to show optional scrollbar</h4> + <p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p> + <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> + <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> + <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> + <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> + <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> + <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> + </div> + <div class="modal-footer"> + <button class="btn" data-dismiss="modal">Close</button> + <button class="btn btn-primary">Save changes</button> + </div> + + </div><!-- /.modal-content --> + </div><!-- /.modal-dalog --> + </div><!-- /.modal --> + <div class="bs-docs-example" style="padding-bottom: 24px;"> <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a> </div> |