mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-14 01:24:19 +02:00
Code Issues Releases Wiki Activity

Merge pull request #16018 from twbs/modal-visual

Browse Source 
Enhancements to Modal visual test
This commit is contained in:
Chris Rebert
2015-03-08 21:33:25 -07:00
parent f41acae9fc a134491fe5
commit 2c56b0feb0
1 changed files with 41 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,9 +13,41 @@
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]--> <![endif]-->
<style>
#tall {
height: 1500px;
width: 100px;
background-color: black;
color: white;
}
</style>
</head> </head>
<body> <body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">navbar-static-top</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">This should not jump to the left when the modal is shown.</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container"> <div class="container">
<div class="page-header"> <div class="page-header">
@@ -99,6 +131,12 @@
Launch demo modal Launch demo modal
</button> </button>
<button id="tall-toggle" class="btn btn-default">Toggle tall &lt;body&gt; content</button>
<br><br>
<div id="tall" style="display: none;">
Tall body content to force the page to have a scrollbar.
</div>
</div> </div>
<!-- JavaScript Includes --> <!-- JavaScript Includes -->
@@ -114,6 +152,9 @@
$(function () { $(function () {
$('.js-popover').popover() $('.js-popover').popover()
$('.js-tooltip').tooltip() $('.js-tooltip').tooltip()
$('#tall-toggle').click(function () {
$('#tall').toggle()
})
}) })
</script> </script>