diff options
| author | Mark Otto <[email protected]> | 2014-07-07 22:10:22 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-07-07 22:10:22 -0700 |
| commit | 81b59d35368bc51d361d0352cc92fe99dc580fbf (patch) | |
| tree | 2395d5e79edaaa8c0a7ad82e99931ec895421532 /js/tests/visual/modal.html | |
| parent | fed2b0f7eb78438eb1b768782b04651881d88740 (diff) | |
| parent | ddee04038f946ac103eb4e70c8eb7adeb2cf563b (diff) | |
| download | bootstrap-81b59d35368bc51d361d0352cc92fe99dc580fbf.tar.xz bootstrap-81b59d35368bc51d361d0352cc92fe99dc580fbf.zip | |
Merge branch 'master' into derp
Conflicts:
docs/_layouts/default.html
docs/assets/css/docs.min.css
docs/assets/css/src/docs.css
docs/assets/js/docs.min.js
docs/assets/js/src/application.js
Diffstat (limited to 'js/tests/visual/modal.html')
| -rw-r--r-- | js/tests/visual/modal.html | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html new file mode 100644 index 000000000..f4f61f47f --- /dev/null +++ b/js/tests/visual/modal.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> +<head> + <title>Modal</title> + <link rel="stylesheet" type="text/css" href="../../../dist/css/bootstrap.min.css"> +</head> +<body> + +<div class="container"> + + <div class="page-header"> + <h1>Modal <small>Bootstrap Visual Test</small></h1> + </div> + + <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> + <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.</p> + + <h4>Popover in a modal</h4> + <p>This <a href="#" role="button" class="btn btn-default js-popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on click.</p> + + <h4>Tooltips in a modal</h4> + <p><a href="#" class="js-tooltip" title="" data-original-title="Tooltip">This link</a> and <a href="#" class="js-tooltip" title="" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p> + + <hr> + + <h4>Overflowing text to show scroll behavior</h4> + <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> + <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 type="button" class="btn btn-default" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary">Save changes</button> + </div> + + </div> + </div> + </div> + + <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> + Launch demo modal + </button> + +</div> + +<!-- JavaScript Includes --> +<script src="../vendor/jquery.min.js"></script> +<script src="../../transition.js"></script> +<script src="../../modal.js"></script> +<script src="../../tooltip.js"></script> +<script src="../../popover.js"></script> + +<!-- JavaScript Test --> +<script> +$(function () { + $('.js-popover').popover() + $('.js-tooltip').tooltip() +}) +</script> + +</body> +</html> |