Question

Currently we are using blockUI for getting modal iframes and jquery UI dialog for getting modal “yes/no”-dialogs.
The reasons why we are working with these two components are

• they both rely on the jquery UI theme – so there’s no break between these 2 kinds of modal-elements.
• it’s really easy to get “yes/no”-dialogs with the jquery UI dialog, and attaching events to those buttons
• blockUI is really more lightweight

We are now looking for an alternative, as the code, which is used for getting modal iframes is a bit buggy:

var popups = {};

function showPopup(settings) {
    var target = settings.target;
    var $popup = popups[target];
    if ($popup) {
        $popup.attr('src', 'blankPage.html');
    }
    else {
        $popup = $('<iframe/>');
        $popup.appendTo('form');
        $popup.css('display', 'none');
        $popup.attr('frameborder', 0);
        $popup.dialog({
            'title': settings.title,
            'autoOpen': false,
            'modal': true,
            'width': settings.width,
            'height': settings.height,
            'draggable': false,
            'resizable': false,
            'open': function () {
                var $widget = $popup.dialog('widget');
                $widget.css('position', 'fixed');
                $widget.css('top', '50%');
                $widget.css('margin-top', $widget.height() / 2 * -1);
                $widget.css('left', '50%');
                $widget.css('margin-left', $widget.width() / 2 * -1);
                $popup.css('width', settings.width);
                $popup.css('padding', '0px');
                $popup.attr('src', settings.target);
            }
        });
        popups[target] = $popup;
    }
    $popup.dialog('open');
}

It works quite well, but when doing a click to open up one dialog, then closing, and reopening it, it shows the prior page some ms – this can be really tricky, if the modal-content has some flow itself.

Is there any chance to fix it, or any alternative script outside there which fits our needs?

Answer 1

the solution is quite simple:

var popups = {};

function showPopup(settings) {
    var target = settings.target;
    var $popup = popups[target];
    if (!$popup) {
        $popup = $('<iframe/>');
        $popup.appendTo('form');
        $popup.css('display', 'none');
        $popup.attr('frameborder', 0);
        $popup.dialog({
            'title': settings.title,
            'autoOpen': false,
            'modal': true,
            'width': settings.width,
            'height': settings.height,
            'draggable': false,
            'resizable': false,
            'open': function () {
                var $widget = $popup.dialog('widget');
                $widget.css('position', 'fixed');
                $widget.css('top', '50%');
                $widget.css('margin-top', $widget.height() / 2 * -1);
                $widget.css('left', '50%');
                $widget.css('margin-left', $widget.width() / 2 * -1);
                $popup.css('width', settings.width);
                $popup.css('padding', '0px');
                $popup.attr('src', settings.target);
            },
            'close': function () {
                $popup.attr('src', 'blankPage.html');
            }
        });
        popups[target] = $popup;
    }
    $popup.dialog('open');
}

still … i’m quite interested in any alternative!