diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index a6070d5a58..aee4d7893d 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -13,9 +13,41 @@
     <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>
   <![endif]-->
+
+  <style>
+    #tall {
+      height: 1500px;
+      width: 100px;
+      background-color: black;
+      color: white;
+    }
+  </style>
 </head>
 <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="page-header">
@@ -99,6 +131,12 @@
     Launch demo modal
   </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>
 
 <!-- JavaScript Includes -->
@@ -114,6 +152,9 @@
 $(function () {
   $('.js-popover').popover()
   $('.js-tooltip').tooltip()
+  $('#tall-toggle').click(function () {
+    $('#tall').toggle()
+  })
 })
 </script>
 
