Bootstrap modal iframe

完整的代码放在 jsFiddle https://jsfiddle.net/liam_lia...

借助Bootstrap，模态弹窗很容易实现，但还是有几个小问题要解决：

1. 让Bootstrap的Modal插件在浏览器中垂直居中。
2. 让弹窗中加载的IFrame铺满弹窗（不留白）。
3. IFrame正在加载内容时，显示“正在加载...”。
4. 保证弹窗内容干净，同时也不污染宿主。

HTML模板

<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>

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();
  });
}

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;
}

让Bootstrap的Modal插件在浏览器中垂直居中

Bootstrap的modal插件不是垂直居中，可能是因为“垂直居中”不易跨越不同版本的浏览器，尤其是IE10以下。支持Flexbox模型的浏览器中，垂直居中很容易，但IE9不支持Flexbox，这并非一个不可接受的问题，所以，我选择了使用flexbox模型。

.centered-modal.in {
    display: flex !important;
    padding: 0 !important;
}

!important 不能少，否则不能覆盖Bootstrap的默认样式。

让弹窗中加载的IFrame铺满弹窗（不留白）

.modal-content {
  height: 100%;
  width: 100%;
  display: table;
}
.modal-body {
  height: 100%;
  width: 100%;
  display: table-row;
}

调用弹窗功能

<a class="btn btn-default btn-lg trigger-modal" role="button" data-url="welcome.html" data-width="100%" data-height="100%"></a>
<a class="btn btn-default btn-lg trigger-modal" role="button" data-url="welcome.html" data-width="50%" data-height="50%"></a>

$('body').on('click', 'a.trigger-modal', function(){
  showModal($(this).attr('data-url'), $(this).text(), $(this).attr('data-width'), $(this).attr('data-height'));
});

弹窗中的IFrame正在加载内容时，显示“正在加载...”

modal.find('#iframe-loading').show();
modal.find('iframe').on("load", function(){
  modal.find('#iframe-loading').hide();
});

保证弹窗内容干净，同时也不污染宿主

当弹窗函数关闭后，我希望下次弹出的是全新的窗体，而不要显示之前弹窗的内容，多次弹窗后，也不要留下垃圾在DOM中。

modal.on('hidden.bs.modal', function () {
  $(this).find('iframe').html("").attr("src", "");
  $('#dynamicallyInjectedModal').remove();
});

完整的代码放在 jsFiddle https://jsfiddle.net/liam_lia...

---

参考链接

• A Visual Guide to CSS3 Flexbox Properties