diff options
| author | Jacob <[email protected]> | 2014-06-08 16:05:08 -0700 |
|---|---|---|
| committer | Jacob <[email protected]> | 2014-06-08 16:05:08 -0700 |
| commit | fe74a8bb3e903c88bd84a2fdfe535013c9effa25 (patch) | |
| tree | 9d089adaa854cfe23431cadb728b1a3d9ac4d6d8 /js/tests/visual/modal.html | |
| parent | 5dbfdd47c57a10cc8e97e74635a4197d31c24f7c (diff) | |
| parent | 91103e6d1f750bc53dce7b4720cf78a50e1baa54 (diff) | |
| download | bootstrap-fe74a8bb3e903c88bd84a2fdfe535013c9effa25.tar.xz bootstrap-fe74a8bb3e903c88bd84a2fdfe535013c9effa25.zip | |
Merge pull request #13755 from twbs/fat-visual-test
Adds isolated visual tests for javascript plugins (decoupled from docs)....
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> |