Bootstrap Modal With Iframe on-the-fly
var modalStr = function() {/*
<div class="custom-modal modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Loading
</div>
</div>
</div>
</div>
*/}.toString().slice(15, -4);
var customModal = $(modalStr);
// give any anchor with class modalizer will open its location with a modal
$(".modalizer").click(function (e) {
e.preventDefault();
var a = $(this);
var modal_width = a.data("width") ? a.data("width") : '800';
var modal_height = a.data("height") ? a.data("height") : '400';
$('body').append(customModal);
$("#myModal .modal-body").html('<iframe style="width:100%;height:99%;min-height:' + modal_height + 'px;border:0;" src="' + $(a).attr("href") + '"></iframe>');
$("#myModalLabel").html($(a).html());
$('#myModal').modal({
keyboard: false
});
$('.custom-modal').on('hidden', function () {
$('.custom-modal').remove();
});
});