Bootstrap modal iframe

by Liu Peng

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://underscorejs.org/underscore-min.js"></script>
<script type="text/template" id="modal-template">
  <div class="modal centered-modal" id="dynamicallyInjectedModal" tabindex="-1" role="dialog" aria-labelledby="modal-title">
    <div class="modal-dialog modal-vertical-centered" role="document" style="width:<%= width %>;height:<%= height %>;">
      <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="modal-title"><%= title %><span id="iframe-loading" class="text-muted small" style="display:none;margin-left:1em;">正在加载...</span></h4>
        </div>
        <div class="modal-body">
          <iframe id="modal-iframe" src="<%= url %>" frameborder="0" backgrond="black"></iframe>
        </div>
      </div>
    </div>
  </div>
</script>

<div class="jumbotron">
  <div class="container">
    <h2>怎么调用模态弹窗函数<code>showModal</code>？</h2>
    <p>
      <pre>
// 不做判断，直接调
showModal(url, title, width, height)</pre>
    </p>
    <p>
      <pre>
// 先做判断，再调用
typeof(showModal) === 'function' ? 
  showModal(url, title, width, height) : 
    alert('"showModal" is not available.');</pre>
    </p>
    <p>
      <a class="btn btn-default btn-lg trigger-modal" role="button" data-url="https://cn.bing.com/" data-width="100%" data-height="100%"></a>
      <a class="btn btn-default btn-lg trigger-modal" role="button" data-url="https://cn.bing.com/" data-width="50%" data-height="50%"></a>
      <a class="btn btn-default btn-lg trigger-modal" role="button" data-url="https://cn.bing.com/" data-width="800px" data-height="400px"></a>
      <a...

CSS

iframe#main {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-top: 50px;
    }
    .centered-modal.in {
        display: flex !important;
        padding: 0 !important;
    }
    .modal-dialog{
      margin: auto;
      padding: 0;
    }
    .modal-content {
      height: 100%;
      width: 100%;
      display: table;
    }
    .modal-body {
      height: 100%;
      width: 100%;
      display: table-row;
    }
    #modal-iframe {
      height: 100%;
      width: 100%;
      background-color: black;
    }

JavaScript

function showModal(url, title, width, height) {
  var title = title ? title.trim() : "";
  var width = width ? width : "100%";
  var height = height ? height : "100%";
  var modal = $(_.template($('#modal-template').html())({
    title: title,
    url: url,
    width: width,
    height: height
  })).modal({
    show: true,
    keyboard: true,
    url: url
  }).on('hidden.bs.modal', function() {
    $(this).find('iframe').html("").attr("src", "");
    $('#dynamicallyInjectedModal').remove();
  });
  modal.find('#iframe-loading').show();
  modal.find('iframe').on("load", function() {
    modal.find('#iframe-loading').hide();
  });
}

$(function() {
  $('body').on('click', 'a.trigger-modal', function() {
    typeof(showModal) === 'function' ?
    showModal($(this).attr('data-url'), $(this).text(), $(this).attr('data-width'), $(this).attr('data-height')):
      alert('"showModal" is not available.');
  });
  $('a.trigger-modal').each(function() {
    $(this).text("Demo - " + $(this).attr('data-width') + '*' + $(this).attr('data-height'));
  })
})