Bootstrap 3.3.0 Snippet by aritztg

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head></head> <body> <h2 class="open">Hola</h2> <div class="modal fade" id="main" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg" role="document"> <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">Modal title</h4> </div> <div class="modal-body"> <div class="embed-responsive" style="height:150px;"> <iframe class="embed-responsive-item wrapper" src=""></iframe> </div> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </body> </html>
$(document).ready(function(){ // When the modal gets opened $('#main').on('show.bs.modal', function(){ // We remove any event with off(), then, we use the 'load' event $('iframe.wrapper').off().load(function(){ // After iframe contents FULL loading, we get its height var b = $('iframe.wrapper').contents().find('body') var h = b.height(); console.log(b, h); // And we assign it to iframe's parent, then we can show it again $('iframe.wrapper').parent().css('height', h+'px').css('opacity', 1); }); // We hide the iframe's parent element and we set the new source $('iframe.wrapper').parent().css('opacity', 0); $('iframe.wrapper').attr('src', '/iframe/ZlDdz'); }); // When the element is clicked $('h2').on('click', function(){ $('#main').modal('show'); return false; }); });

Related: See More

Questions / Comments: