rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

fix modal visual example for js

Browse Source
This commit is contained in:
Jacob Thornton 2015-08-18 19:50:32 -07:00
parent efae761c39
commit 8cfde5ef29
1 changed files with 30 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
js/tests/visual/modal.html
View File

@ -25,30 +25,30 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-default navbar-static-top"> <nav class="navbar navbar-dark bg-inverse navbar-static-top">
<div class="container-fluid"> <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
<div class="navbar-header"> &#9776;
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> </button>
<span class="sr-only">Toggle navigation</span> <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<span class="icon-bar"></span> <a class="navbar-brand" href="#">This shouldn't jump!</a>
<span class="icon-bar"></span> <ul class="nav navbar-nav">
<span class="icon-bar"></span> <li class="nav-item active">
</button> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<a class="navbar-brand" href="#">navbar-static-top</a> </li>
</div> <li class="nav-item">
<div id="navbar" class="navbar-collapse collapse"> <a class="nav-link" href="#">Features</a>
<ul class="nav navbar-nav"> </li>
<li><a href="#about">About</a></li> <li class="nav-item">
<li><a href="#contact">Contact</a></li> <a class="nav-link" href="#">Pricing</a>
</ul> </li>
<ul class="nav navbar-nav navbar-right"> <li class="nav-item">
<li><a href="#">This should not jump to the left when the modal is shown.</a></li> <a class="nav-link" href="#">About</a>
</ul> </li>
</div><!--/.nav-collapse --> </ul>
</div> </div>
</nav> </nav>
<div class="container"> <div class="container m-t-lg">
<div class="page-header"> <div class="page-header">
<h1>Modal <small>Bootstrap Visual Test</small></h1> <h1>Modal <small>Bootstrap Visual Test</small></h1>
@ -67,7 +67,7 @@
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<h4>Popover in a modal</h4> <h4>Popover in a modal</h4>
<p>This <a href="#" role="button" class="btn btn-default js-popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?" data-placement="left">button</a> should trigger a popover on click.</p> <p>This <a href="#" role="button" class="btn btn-primary js-popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?" data-placement="left">button</a> should trigger a popover on click.</p>
<h4>Tooltips in a modal</h4> <h4>Tooltips in a modal</h4>
<p><a href="#" class="js-tooltip" title="Tooltip">This link</a> and <a href="#" class="js-tooltip" title="Tooltip">that link</a> should have tooltips on hover.</p> <p><a href="#" class="js-tooltip" title="Tooltip">This link</a> and <a href="#" class="js-tooltip" title="Tooltip">that link</a> should have tooltips on hover.</p>
@ -141,10 +141,13 @@
<!-- JavaScript Includes --> <!-- JavaScript Includes -->
<script src="../vendor/jquery.min.js"></script> <script src="../vendor/jquery.min.js"></script>
<script src="../vendor/tether.min.js"></script>
<script src="../../dist/util.js"></script> <script src="../../dist/util.js"></script>
<script src="../../dist/modal.js"></script> <script src="../../dist/modal.js"></script>
<script src="../../dist/collapse.js"></script> <script src="../../dist/collapse.js"></script>
<script src="../../dist/tooltip.js"></script>
<script src="../../dist/popover.js"></script>
<!-- <script src="../../transition.js"></script> <!-- <script src="../../transition.js"></script>
<script src="../../tooltip.js"></script> <script src="../../tooltip.js"></script>
@ -153,11 +156,11 @@
<!-- JavaScript Test --> <!-- JavaScript Test -->
<script> <script>
$(function () { $(function () {
// $('.js-popover').popover() $('.js-popover').popover()
// $('.js-tooltip').tooltip() $('.js-tooltip').tooltip()
// $('#tall-toggle').click(function () { $('#tall-toggle').click(function () {
// $('#tall').toggle() $('#tall').toggle()
// }) })
}) })
</script> </script>