Twitters bootstrap modal in iframe popout of it

Question

In Twitter Bootstrap is the possibility to get out of the box Modal dialogs shown on a website. But I'm using this in a existing webapplication, that uses a lot of iframes. The problem is; if you open a TB modal inside a iframe, it shows centered inside that iframe. I want to show it modal over the current opened page. With the modal backdrop/shadown. But how..? I tried "window.parent.parent.document.*", but then the content isn't shown. example

Solution 1

I use helper method to inject/update modals. It works in your iframe scenario.

In iframe:

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

The renderModal needs to be avaiable in parent page scope. Here is the code for it:

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

Solution 2

if you are using jquery it gets a little clearer.

On you iframe page (i have a button)

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

where you are passing the model id. Note: The modal code MUST be loaded on the top frame where you are calling it.

Then in that top frame you simply have:

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

Works great.....

Comments

[John Magnolia]

There are some useful suggestion here: github.com/twitter/bootstrap/issues/936

[user1469734]

Very nice; Thanks! But sometimes the modal dialog is in a iframe inside a iframe. So a window.parent.parent.renderModal() should be called then, a double parent. Isn't there a function to call the mooooosssst parent window?

[Christian]

@user1469734 Yes, window.top is the topmost parent. To check if you are the topmost window, you can do var amiTop = window.top === window;