Skip to content

Instantly share code, notes, and snippets.

@keisuke-kawamura

keisuke-kawamura/modal.html

Created February 13, 2013 10:46
Show Gist options
  • Save keisuke-kawamura/4943789 to your computer and use it in GitHub Desktop.
Save keisuke-kawamura/4943789 to your computer and use it in GitHub Desktop.
Download ZIP
modal sample
Raw
modal.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style type="text/css">
body .modal {
width: 90%; /* desired relative width */
top: 10%; /* (100%-width)/2 */
left: 5%; /* (100%-width)/2 */
margin: auto auto auto auto; /* place center */
}
body .modal.fade.in {
top: auto; /* fade in to correct spot */
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body" width="500">
<p>
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
One fine body....<br />
</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment