javascript - 是什么让 Bootstrap 模态变高或变宽？

Question

我正在尝试使用 Jschr 的 Bootstrap-Modal 分支来允许各种大小的模态。

我不明白为什么某些模态框更高、更宽或尺寸不同。

这是文档:http://jschr.github.io/bootstrap-modal/

这是一个 super 简化的 jsFiddle:http://jsfiddle.net/4NRrr/

和相关的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, '    '));
});

});

和 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 over for <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">&times;</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>

Answer 1

看起来它的大小正好适合 modal-body div 中的内容。例如，如果您替换

<div class="modal-body">
  <img src="http://i.imgur.com/KwPYo.jpg" />
</div>

与

<div class="modal-body">
   <div style="height:100px; overflow:hidden;">
      <img src="http://i.imgur.com/KwPYo.jpg" />
   </div>
</div>

你会得到一个更短的模态框。