Bootstrap Modal Centered

by abenrob

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.js"></script>
<button id="button" class="btn">modal</button>
<div id="modal-from-dom" class="modal hide fade">
    <div class="modal-header"> <a href="#" class="close">×</a>

         <h3>Modal Heading</h3>

    </div>
    <div class="modal-body">
        <iframe id="iframe-content" width=100% height="300px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=""></iframe>
    </div>
</div>

CSS

#modal-from-dom {
    width:75%;
    height:50%;
}

.modal-body {
    height:100%;
}

JavaScript

var $modal = $('#modal-from-dom');
var $mhead = $('.modal-header');
var $mbody = $('.modal-body');
var $iframe = $('#iframe-content');
var gmaps = "https://maps.google.com/?ie=UTF8&amp;ll=37.6,-95.665&amp;spn=60.480903,114.169922&amp;t=m&amp;z=4&amp;output=embed"
$modal.modal({
    backdrop: true,
    keyboard: true,
});

$('#button').click(function (event) {
    event.preventDefault();

    $modal.modal('show');
    $modal.css({
        'margin-top': function () {
            return window.pageYOffset - ($(this).height() / 2);
        }
    });
    $modal.css({
        'margin-left': function () {
            return window.pageXOffset - ($(this).width() / 2);
        }
    });
    $mbody.height(($modal.height()-$mhead.height()));
    console.log($mbody.height());
    $iframe.height($mbody.height());
    $iframe.attr('src', gmaps);
});