Support t.popup From Inside Secondary iframes

Historically calling t.popup has had an important caveat: it would only work when it had an element in Trello that it could open relative to. You could call it from callbacks for card-buttons or board-buttons since Trello could position the popup relative to the button that was pressed.

However, you couldn’t call it from inside of a t.modal, card-back-section or attachment-section. This was because Trello didn’t know where to position the popup relative to the content in your crossdomain iframe.

With much rejoicing, we are pleased to announce this limitation has been removed, and you can now use t.popup from within your modals, card-back-sections, attachment-sections etc :tada:

The key to using t.popup in these circumstances is to pass in with your options for t.popup the mouseEvent for a click on some element in your iframe. Trello will take care of the rest.

For example:

document.getElementById('popup-button').addEventListener('click', function(event) {
  t.popup({
    mouseEvent: event,
    url: 'my-popup.html',
    ...,
  })
}

All of the t.popup types are available as with a normal popup. You can open a confirmation dialog, datetime picker, iframe, etc. as you normally would.

3 Likes