"popup"
Bootstrap 3.2.0 Snippet by xrozix

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="#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"> <iframe frameborder="0" scrolling="no" width="700" height="700" src="http://google.about.com/b/2013/04/01/google-nose.htm"> </iframe> </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"> <iframe frameborder="0" scrolling="no" width="700" height="700" src="http://google.about.com/b/2013/04/01/google-nose.htm"> </iframe> </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 -->
.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 }
// 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); });

Related: See More


Questions / Comments: