Skip to content

Instantly share code, notes, and snippets.

@6

6/index.html

Created April 22, 2015 04:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save 6/d9357b1432f2d5dc63a8 to your computer and use it in GitHub Desktop.
Save 6/d9357b1432f2d5dc63a8 to your computer and use it in GitHub Desktop.
Download ZIP
modal fix bootstrap
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
.modal.fade.in {
transform: translate3d(0,0,0);
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
<div id="modal1" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>Make sure this page is loaded with a smaller height then the modal content. Scroll bar exists but mouse wheel doesn't scroll when using Chromium Version 41.0.2272.76 Ubuntu 14.04 (64-bit). Seems to work in Firefox.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse egestas varius vulputate. Pellentesque felis felis, efficitur in diam id, egestas facilisis neque. Praesent vitae maximus nunc. Aliquam tellus erat, mollis et risus at, semper congue tellus. Phasellus accumsan sit amet risus sed viverra. Aenean sit amet lacinia enim. Duis at mi in diam rutrum volutpat sed eu augue.</p>
<p>Pellentesque mauris neque, mollis sed massa eget, cursus euismod magna. Aliquam hendrerit sapien purus, sit amet tincidunt diam suscipit a. Nulla maximus leo sit amet elit posuere, in tincidunt quam fringilla. Proin risus quam, pulvinar et sollicitudin ut, lacinia id nulla. Curabitur nec mi hendrerit, cursus elit non, malesuada erat. Donec non sapien eros. Pellentesque facilisis, purus quis fermentum vulputate, purus enim sagittis turpis, ut semper metus mauris at augue. Donec vel placerat lorem. Donec mauris magna, vehicula ac est eu, malesuada accumsan est. Phasellus accumsan tempor eleifend. Integer vitae venenatis dolor. Pellentesque a egestas nisi. Quisque vel tortor ut metus dictum laoreet. Curabitur eu sem id velit volutpat sollicitudin. Duis feugiat mattis arcu, in commodo metus finibus at.</p>
<p>Vestibulum ipsum odio, mollis et tempus nec, finibus eu massa. Vivamus auctor maximus diam, eu tempor enim euismod ut. Mauris elementum metus lorem, at efficitur quam vehicula sed. Duis non imperdiet diam. Morbi a mauris consectetur, ornare mi efficitur, elementum neque. Vestibulum auctor magna et est venenatis venenatis. Cras vestibulum neque vel metus tempor ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse egestas varius vulputate. Pellentesque felis felis, efficitur in diam id, egestas facilisis neque. Praesent vitae maximus nunc. Aliquam tellus erat, mollis et risus at, semper congue tellus. Phasellus accumsan sit amet risus sed viverra. Aenean sit amet lacinia enim. Duis at mi in diam rutrum volutpat sed eu augue.</p>
<p>Pellentesque mauris neque, mollis sed massa eget, cursus euismod magna. Aliquam hendrerit sapien purus, sit amet tincidunt diam suscipit a. Nulla maximus leo sit amet elit posuere, in tincidunt quam fringilla. Proin risus quam, pulvinar et sollicitudin ut, lacinia id nulla. Curabitur nec mi hendrerit, cursus elit non, malesuada erat. Donec non sapien eros. Pellentesque facilisis, purus quis fermentum vulputate, purus enim sagittis turpis, ut semper metus mauris at augue. Donec vel placerat lorem. Donec mauris magna, vehicula ac est eu, malesuada accumsan est. Phasellus accumsan tempor eleifend. Integer vitae venenatis dolor. Pellentesque a egestas nisi. Quisque vel tortor ut metus dictum laoreet. Curabitur eu sem id velit volutpat sollicitudin. Duis feugiat mattis arcu, in commodo metus finibus at.</p>
<p>Vestibulum ipsum odio, mollis et tempus nec, finibus eu massa. Vivamus auctor maximus diam, eu tempor enim euismod ut. Mauris elementum metus lorem, at efficitur quam vehicula sed. Duis non imperdiet diam. Morbi a mauris consectetur, ornare mi efficitur, elementum neque. Vestibulum auctor magna et est venenatis venenatis. Cras vestibulum neque vel metus tempor ornare.</p>
</div>
</div>
</div>
</div>
<script>
window.onload = function() { $('#modal1').modal(); };
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment