I'm having trouble utilizing Jschr's modified Bootstrap-Modal for different modal sizes.
I can't seem to understand why some modals appear taller, wider, or have other specific dimensions.
For more information, refer to the documentation:
Check out this simplified jsFiddle example: http://jsfiddle.net/4NRrr/
Here is the relevant JavaScript code snippet:
$(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, ' '));
});
});
Additionally, here is the HTML content:
<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>