Bootstrap 3 Variable-Width Modal
How do I make an bootstrap 3 variable-width modal?
I wanted to override the default Bootstrap modal so it's variable-width, and height-optimized. 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.. What is a bootstrap 3 variable-width modal? How do you make a bootstrap 3 variable-width modal? This script and codes were developed by Scott Dawson on 24 December 2022, Saturday.
Bootstrap 3 Variable-Width Modal - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bootstrap 3 Variable-Width Modal</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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="#normalModal" class="btn btn-default">Normal</a>
<a data-toggle="modal" href="#tallModal" class="btn btn-primary">Wide, Tall Content</a>
<a data-toggle="modal" href="#shortModal" class="btn btn-primary">Wide, Short Content</a>
<div id="normalModal" 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">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="tallModal" class="modal modal-wide 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">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="shortModal" class="modal modal-wide 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">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog -->
</div><!-- /.modal --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Bootstrap 3 Variable-Width Modal - Script Codes CSS Codes
.modal.modal-wide .modal-dialog { width: 90%;
}
.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 }
Bootstrap 3 Variable-Width Modal - Script Codes JS Codes
// 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);
});
Developer | Scott Dawson |
Username | DawsonMediaD |
Uploaded | December 24, 2022 |
Rating | 4.5 |
Size | 2,666 Kb |
Views | 8,096 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Simple CSS for Disabled Buttons | 2,253 Kb |
Animate Page Transition Using jQuery and CSS3 Scale Transforms | 3,597 Kb |
Integrating Bounce.js with Angular.js | 2,614 Kb |
Floating Footer Notification | 2,290 Kb |
CSS Regions for Codepen.io Pattern Rodeo | 2,879 Kb |
Testing Pesky IE8 and Font Awesome | 1,999 Kb |
SCSS is More | 3,264 Kb |
Problem with Chrome Row Hover | 1,859 Kb |
Photo Gallery POC | 3,718 Kb |
Top Ribbon Visible on Scroll | 2,724 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Tab panels | Accessibility | 0 Kb |
Mega menu | DimaZubkov | 5,066 Kb |
Experiment | Toddmoy | 2,849 Kb |
Fun form with currentColor | Bnthor | 2,713 Kb |
Fireworks Show | Arianalynn | 3,048 Kb |
Drawing a Terminal with CSS | Lachlanjc | 3,185 Kb |
Long Shadow Button | Uixcrazy | 3,550 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
Simple CSS loader. | Cabrera | 2,574 Kb |
Css3 slide | Nakome | 3,190 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!