<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h1>Bootstrap 3 Variable-Width Modal</h1>
<p>I wanted to override the default Bootstrap modal so it's variable-width, and height-optimized.</p>
<p>Add "modal-wide" to the main modal div, and adjust the width in the CSS. In this example, I'm using 90%.</p>
<p>Since I'm using jQuery to set the max-height of the content area based on the browser dimensions, the modal will be only as tall as necessary, and will provide a scrollbar if needed.</p>
<a data-toggle="modal" href="#1Modal" class="btn btn-info">More</a>
<a data-toggle="modal" href="#2Modal" class="btn btn-info">More</a>
<div id="1Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">webmaster</h4>
</div>
<div class="modal-body">
<h1>Here is we what do!</h1>
<li>Maintain websites for clients and businesses.</li><br>
<li>Ensure the web servers, hardware and software are operating accurately.</li><br><li>Design websites.</li><br>
<li>Generate and revise web pages.</li><br>
<li>Lay out content on web pages.</li><br>
<li>Generate and revise web pages.Deal with and respond to heavy volumes of email.></li><br>
<li>Test websites to see if there are any parts that are difficult to use.</li><br>
<li>Fix links that don't work and pictures that aren't appearing properly.</li><br><li> Keep files small so sites load faster.</li><br>
<li>Test different browsers and ensure people with different computers can access a website.</li><br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="2Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Administrator</h4>
</div>
<div class="modal-body">
<h3>Growing your business or have a need to delegate a task?</h3>
<p>We are client-focused, and provide high-quality freelance executive assistance to clients all around the world. All projects are given our undivided attention to detail. We deliver high-quality work with little to no supervision.</p>
<p>Administrative Assistance Provided via reliable internet connection are:</p>
<li>Responding to emails and phone calls</li>
<li>Scheduling meetings</li>
<li>Booking travel accommodations</li>
<li>Manage calendar</li>
<li>Market research</li>
<li>Web communication: Skype, TeamViewer, GoToMeeting, etc.</li>
<li>Prepare presentations and other comprehensive documents</li>
<p>Hire us, we deliver excellent virtual, assistance services remotely efficiently and cost effectively Get started now </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
.modal.modal-wide .modal-dialog {
width: 90%;
}
.modal-wide .modal-body {
overflow-y: auto;
}
.modal-wide .modal-body {
overflow-y: auto;
}
/* irrelevant styling */
body { text-align: center; }
body p {
max-width: 400px;
margin: 20px auto;
}
#tallModal .modal-body p { margin-bottom: 900px }
// when .modal-wide opened, set content-body height based on browser height; 200 is appx height of modal padding, modal title and button bar
$(".modal-wide").on("show.bs.modal", function() {
var height = $(window).height() - 200;
$(this).find(".modal-body").css("max-height", height);
});
