Bootstrap Modal With Iframe on-the-fly

03/05/15
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">&times;</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();
        });
    });

Yorumlar

Görüşünüzü paylaşın

(No HTML, Textile help only please.)