<!doctype html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
<title>Bootstrap-modal by jschr</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
|
<link href="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css" rel="stylesheet" />
|
<style>
|
body {
|
padding-top: 40px;
|
}
|
</style>
|
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" />
|
<link href="css/bootstrap-modal.css" rel="stylesheet" />
|
<style>
|
.text-center {
|
text-align: center;
|
}
|
|
.marketing h1 {
|
font-size: 50px;
|
font-weight: lighter;
|
line-height: 1;
|
}
|
|
.marketing p {
|
font-size: 18px;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="page-container">
|
<div class="container" style="position: relative">
|
<div class="marketing">
|
<h1>Bootstrap-Modal</h1>
|
<p class="muted">Responsive, Stackable, AJAX and more.</p>
|
<iframe style="margin-top: 10px" src="http://ghbtns.com/github-btn.html?user=jschr&repo=bootstrap-modal&type=watch&count=true"
|
allowtransparency="true" frameborder="0" scrolling="0" width="95px" height="20px"></iframe>
|
<iframe style="margin-top: 10px" src="http://ghbtns.com/github-btn.html?user=jschr&repo=bootstrap-modal&type=fork&count=true"
|
allowtransparency="true" frameborder="0" scrolling="0" width="95px" height="20px"></iframe>
|
</div>
|
<br />
|
<div class="row">
|
<div class="span10">
|
<p>
|
Using Bootstrap 3? Include the <a href="css/bootstrap-modal-bs3patch.css">patch file</a> <strong>before</strong> bootstrap-modal and check out the <a href="bs3.html">demo page</a>.
|
</p>
|
<div class="responsive">
|
<h3>Responsive</h3>
|
<pre class="pre-scrollable prettyprint linenums" data-source="#responsive">
|
</pre>
|
<div class="text-center">
|
<button class="demo btn btn-primary btn-large" data-toggle="modal" href="#responsive">View Demo</button>
|
</div>
|
</div>
|
<br />
|
|
<div class="stackable">
|
<h3>Stackable</h3>
|
<pre class="pre-scrollable prettyprint linenums" data-source="#stack1, #stack2, #stack3">
|
</pre>
|
<div class="text-center">
|
<button class="demo btn btn-primary btn-large" data-toggle="modal" href="#stack1">View Demo</button>
|
</div>
|
</div>
|
<br />
|
|
<!--<div class="dynamic">
|
<h3>Dynamic</h3>
|
<pre class="pre-scrollable prettyprint linenums" data-source="#dynamic">
|
</pre>
|
<div class="text-center">
|
<button class="demo btn btn-primary btn-large" data-toggle="modal">View Demo</button>
|
</div>
|
</div>
|
<br />-->
|
|
<div class="ajax" style="position: relative; overflow: hidden">
|
<h3>AJAX (via jQuery.load)</h3>
|
<pre class="pre-scrollable prettyprint linenums" data-source="#ajax">
|
</pre>
|
<div class="text-center">
|
<button class="demo btn btn-primary btn-large" data-toggle="modal">View Demo</button>
|
</div>
|
</div>
|
<br />
|
|
<div class="static" style="position: relative; overflow: hidden">
|
<h3>Static Background with Animation</h3>
|
<p>The shake animation is included in bootstrap-modal but any animation in <a href="http://daneden.me/animate/">animate.css</a> is supported, just include the css file in your project.</p>
|
<pre class="pre-scrollable prettyprint linenums" data-source="#static">
|
</pre>
|
<div class="text-center">
|
<button class="demo btn btn-primary btn-large" data-toggle="modal" href="#static">View Demo</button>
|
</div>
|
</div>
|
<br />
|
|
<div class="full-width" style="position: relative; overflow: hidden">
|
<h3>Full Width</h3>
|
<pre class="pre-scrollable prettyprint linenums" data-source="#full-width">
|
</pre>
|
<div class="text-center">
|
<button class="demo btn btn-primary btn-large" data-toggle="modal" href="#full-width">View Demo</button>
|
</div>
|
</div>
|
<br />
|
|
<div class="long" style="position: relative; overflow: hidden">
|
<h3>Long Modals</h3>
|
<pre class="pre-scrollable prettyprint linenums" data-source="#long">
|
</pre>
|
<div class="text-center">
|
<button class="demo btn btn-primary btn-large" data-toggle="modal" href="#long">View Demo</button>
|
</div>
|
</div>
|
<br />
|
|
</div>
|
</div>
|
</div>
|
|
<!-- Modal Definitions (tabbed over for <pre>) -->
|
<div id="responsive" class="modal hide fade" tabindex="-1" data-width="760">
|
<div class="modal-header">
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
<h3>Responsive</h3>
|
</div>
|
<div class="modal-body">
|
<div class="row-fluid">
|
<div class="span6">
|
<h4>Some Input</h4>
|
<p><input type="text" class="span12" /></p>
|
<p><input type="text" class="span12" /></p>
|
<p><input type="text" class="span12" /></p>
|
<p><input type="text" class="span12" /></p>
|
<p><input type="text" class="span12" /></p>
|
<p><input type="text" class="span12" /></p>
|
<p><input type="text" class="span12" /></p>
|
</div>
|
<div class="span6">
|
<h4>Some More Input</h4>
|
<p><input type="text" class="span12" /></p>
|
<p><input type="text" class="span12" /></p>
|
<p><input type="text" class="span12" /></p>
|
<p><input type="text" class="span12" /></p>
|
<p><input type="text" class="span12" /></p>
|
<p><input type="text" class="span12" /></p>
|
<p><input type="text" class="span12" /></p>
|
</div>
|
</div>
|
</div>
|
<div class="modal-footer">
|
<button type="button" data-dismiss="modal" class="btn">Close</button>
|
<button type="button" class="btn btn-primary">Save changes</button>
|
</div>
|
</div>
|
|
<div id="full-width" class="modal container hide fade" tabindex="-1">
|
<div class="modal-header">
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
<h3>Full Width</h3>
|
</div>
|
<div class="modal-body">
|
<p>This modal will resize itself to the same dimensions as the container class.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin ipsum ac ante fermentum suscipit. In ac augue non purus accumsan lobortis id sed nibh. Nunc egestas hendrerit ipsum, et porttitor augue volutpat non. Aliquam erat volutpat. Vestibulum scelerisque lobortis pulvinar. Aenean hendrerit risus neque, eget tincidunt leo. Vestibulum est tortor, commodo nec cursus nec, vestibulum vel nibh. Morbi elit magna, ornare placerat euismod semper, dignissim vel odio. Phasellus elementum quam eu ipsum euismod pretium.</p>
|
</div>
|
<div class="modal-footer">
|
<button type="button" data-dismiss="modal" class="btn">Close</button>
|
<button type="button" class="btn btn-primary">Save changes</button>
|
</div>
|
</div>
|
|
<div id="stack1" class="modal hide fade" tabindex="-1" data-focus-on="input:first">
|
<div class="modal-header">
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
<h3>Stack One</h3>
|
</div>
|
<div class="modal-body">
|
<p>One fine body…</p>
|
<p>One fine body…</p>
|
<p>One fine body…</p>
|
<input type="text" data-tabindex="1" />
|
<input type="text" data-tabindex="2" />
|
<button class="btn" data-toggle="modal" href="#stack2">Launch modal</button>
|
</div>
|
<div class="modal-footer">
|
<button type="button" data-dismiss="modal" class="btn">Close</button>
|
<button type="button" class="btn btn-primary">Ok</button>
|
</div>
|
</div>
|
|
<div id="stack2" class="modal hide fade" tabindex="-1" data-focus-on="input:first">
|
<div class="modal-header">
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
<h3>Stack Two</h3>
|
</div>
|
<div class="modal-body">
|
<p>One fine body…</p>
|
<p>One fine body…</p>
|
<input type="text" data-tabindex="1" />
|
<input type="text" data-tabindex="2" />
|
<button class="btn" data-toggle="modal" href="#stack3">Launch modal</button>
|
</div>
|
<div class="modal-footer">
|
<button type="button" data-dismiss="modal" class="btn">Close</button>
|
<button type="button" class="btn btn-primary">Ok</button>
|
</div>
|
</div>
|
|
<div id="stack3" class="modal hide fade" tabindex="-1" data-focus-on="input:first">
|
<div class="modal-header">
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
<h3>Stack Three</h3>
|
</div>
|
<div class="modal-body">
|
<p>One fine body…</p>
|
<input type="text" data-tabindex="1" />
|
<input type="text" data-tabindex="2" />
|
</div>
|
<div class="modal-footer">
|
<button type="button" data-dismiss="modal" class="btn">Close</button>
|
<button type="button" class="btn btn-primary">Ok</button>
|
</div>
|
</div>
|
|
<div id="static" class="modal hide fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
|
<div class="modal-body">
|
<p>Would you like to continue with some arbitrary task?</p>
|
</div>
|
<div class="modal-footer">
|
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
|
<button type="button" data-dismiss="modal" class="btn btn-primary">Continue Task</button>
|
</div>
|
</div>
|
|
<div id="long" class="modal hide fade" tabindex="-1" data-replace="true">
|
<div class="modal-header">
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
<h3>A Fairly Long Modal</h3>
|
</div>
|
<div class="modal-body">
|
<button class="btn" data-toggle="modal" href="#notlong" style="position: absolute; top: 50%; right: 12px">Not So Long Modal</button>
|
<img style="height: 800px" src="http://i.imgur.com/KwPYo.jpg" />
|
</div>
|
<div class="modal-footer">
|
<button type="button" data-dismiss="modal" class="btn">Close</button>
|
</div>
|
</div>
|
|
<div id="notlong" class="modal hide fade" tabindex="-1" data-replace="true">
|
<div class="modal-header">
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
<h3>Not That Long</h3>
|
</div>
|
<div class="modal-body">
|
<button class="btn" data-toggle="modal" href="#verylong" style="position: absolute; top: 50%; right: 12px">Very Long Modal</button>
|
<div style="height: 400px; overflow: hidden;">
|
<img style="height: 800px" src="http://i.imgur.com/KwPYo.jpg" />
|
</div>
|
</div>
|
<div class="modal-footer">
|
<button type="button" data-dismiss="modal" class="btn">Close</button>
|
</div>
|
</div>
|
|
<div id="verylong" class="modal hide fade" tabindex="-1" data-replace="true">
|
<div class="modal-header">
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
<h3>A Very Long</h3>
|
</div>
|
<div class="modal-body">
|
<div style="height: 1000px; overflow: hidden;">
|
<img style="height: 800px" src="http://i.imgur.com/KwPYo.jpg" />
|
</div>
|
</div>
|
<div class="modal-footer">
|
<button type="button" data-dismiss="modal" class="btn">Close</button>
|
</div>
|
</div>
|
|
<div id="ajax-modal" class="modal hide fade" tabindex="-1"></div>
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.js"></script>
|
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
|
<script src="js/bootstrap-modalmanager.js"></script>
|
<script src="js/bootstrap-modal.js"></script>
|
<script type="text/javascript">
|
|
$(function(){
|
|
$.fn.modalmanager.defaults.resize = true;
|
|
$('[data-source]').each(function(){
|
var $this = $(this),
|
$source = $($this.data('source'));
|
|
var text = [];
|
$source.each(function(){
|
var $s = $(this);
|
if ($s.attr('type') == 'text/javascript'){
|
text.push($s.html().replace(/(\n)*/, ''));
|
} else {
|
text.push($s.clone().wrap('<div>').parent().html());
|
}
|
});
|
|
$this.text(text.join('\n\n').replace(/\t/g, ' '));
|
});
|
|
prettyPrint();
|
});
|
</script>
|
|
|
<script id="dynamic" type="text/javascript">
|
$('.dynamic .demo').click(function(){
|
var tmpl = [
|
// tabindex is required for focus
|
'<div class="modal hide fade" tabindex="-1">',
|
'<div class="modal-header">',
|
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>',
|
'<h3>Modal header</h3>',
|
'</div>',
|
'<div class="modal-body">',
|
'<p>Test</p>',
|
'</div>',
|
'<div class="modal-footer">',
|
'<a href="#" data-dismiss="modal" class="btn">Close</a>',
|
'<a href="#" class="btn btn-primary">Save changes</a>',
|
'</div>',
|
'</div>'
|
].join('');
|
|
$(tmpl).modal();
|
});
|
</script>
|
|
<script id="ajax" type="text/javascript">
|
|
var $modal = $('#ajax-modal');
|
|
$('.ajax .demo').on('click', function(){
|
// create the backdrop and wait for next modal to be triggered
|
$('body').modalmanager('loading');
|
|
setTimeout(function(){
|
$modal.load('modal_ajax_test.html', '', function(){
|
$modal.modal();
|
});
|
}, 1000);
|
});
|
|
$modal.on('click', '.update', function(){
|
$modal.modal('loading');
|
setTimeout(function(){
|
$modal
|
.modal('loading')
|
.find('.modal-body')
|
.prepend('<div class="alert alert-info fade in">' +
|
'Updated!<button type="button" class="close" data-dismiss="alert">×</button>' +
|
'</div>');
|
}, 1000);
|
});
|
|
</script>
|
</body>
|
</html>
|
