Question

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

我无法弄清楚为什么某些模态更高，更宽或更大。

以下是文档：http://jschr.github.io/bootstrap-modal/

这是一个超级简化的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>

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

什么使Bootstrap模态高或宽？

1 个答案: