Question

在Twitter中，Bootstrap可以在网站上显示开箱即用的模态对话框。但是我在现有的webapplication中使用它，它使用了很多iframe。问题是;如果你在iframe中打开TB模式，它会显示在iframe内部。我想在当前打开的页面上显示模态。随着模态背景/ shadown。但是如何..？我试过“window.parent.parent.document。*”，但后来没有显示内容。 example

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

效果很好.....

Twitter的iframe中的bootstrap模式突然出现了

2 个答案: