javascript - What makes the Bootstrap modal tall or wide? -
i'm trying use jschr's bootstrap-modal fork allow various sized modals.
i cannot figure out why modals taller, wider, or otherwise sized.
here's documentation: http://jschr.github.io/bootstrap-modal/
here's super simplified jsfiddle: http://jsfiddle.net/4nrrr/
and relevant 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, ' ')); }); }); and html
<div class="page-container"> <div class="container" style="position: relative"> <button class="demo btn btn-primary btn-large" data-toggle="modal" href="#long">view demo</button> </div> </div> <!-- modal definitions (tabbed on <pre>) --> <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>long modal</h3> </div> <div class="modal-body"> <img src="http://i.imgur.com/kwpyo.jpg" /> </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn">close</button> </div> </div>
it looks sized content in modal-body div. example, if replace
<div class="modal-body"> <img src="http://i.imgur.com/kwpyo.jpg" /> </div> with
<div class="modal-body"> <div style="height:100px; overflow:hidden;"> <img src="http://i.imgur.com/kwpyo.jpg" /> </div> </div> you shorter modal box.
Comments
Post a Comment