twitter-bootstrap - Twitters bootstrap modal 在 iframe 中弹出

Question

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

Answer 1

我使用辅助方法来注入/更新模态。它适用于您的 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);
    }
  });
}

Answer 2

如果您使用的是 jquery，它会变得更清晰一些。

在你的 iframe 页面上（我有一个按钮）

  $('#tasks-modal').click(function(){
        window.parent.renderModal('#taskModal');
  });

您在哪里传递模型 ID。注意：模式代码必须加载到您调用它的顶部框架上。

然后在那个顶部框架中，您只需：

function renderModal(selector) {
      $(selector).modal('show');
}

效果很好......