twitter-bootstrap - Twitter 在 iframe 中的 Bootstrap 模式弹出

Question

在 Twitter Bootstrap 中，可以开箱即用地显示网站上的模态对话框。但我在现有的 Web 应用程序中使用它，该应用程序使用大量 iframe。问题是;如果您在 iframe 内打开 TB 模式，它会在该 iframe 内居中显示。我想在当前打开的页面上显示它的模式。使用模态背景/阴影。但如何..？我尝试了“window.parent.parent.document.*”，但内容没有显示。 example

Answer 1

我使用辅助方法来注入(inject)/更新模态。它适用于您的 iframe 场景。

在 iframe 中:

$(function() {
  window.parent.renderModal(".my-modal-class", "My modal content");
});

renderModal 需要在父页面范围内可用。这是它的代码:

function renderModal(selector, html, options) {
  var parent = "body",
      $this = $(parent).find(selector);

  options = options || {};
  options.width = options.width || 'auto';

  if ($this.length == 0) {
    var selectorArr = selector.split(".");
    var $wrapper = $('<div class="modal hide fade ' + selectorArr[selectorArr.length-1] + '"></div>').append(html);
    $this = $wrapper.appendTo(parent);
    $this.modal();
  } else {
    $this.html(html).modal("show");
  }

  $this.css({
    width: options.width,
    'margin-left': function () {
      return -($(this).width() / 2);
    }
  });
}