我正在尝试使用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">×</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>
答案 0 :(得分:0)
看起来它只是对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>
你得到一个更短的模态框。