Как исправить мой доморощенный модальный скрипт - или: есть ли альтернатива? - PullRequest
Новая
       1

Как исправить мой доморощенный модальный скрипт - или: есть ли альтернатива?

0 голосов
/ 20 июня 2011

В настоящее время мы используем blockUI для получения модальных фреймов и jQuery UI диалог для получения модальных "да / нет" -диалогов.
Причины, по которым мы работаем с этими двумя компонентами:

  • они оба полагаются на тему пользовательского интерфейса jquery - так что между этими двумя видами модальных элементов нет перерыва.
  • действительно легко получить диалоги "да / нет" с диалогом пользовательского интерфейса jquery и прикрепить события к этим кнопкам
  • blockUI действительно более легкий

Сейчас мы ищем альтернативу, так как код, который используется для получения модальных фреймов, немного глючит: 

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

Это работает довольно хорошо, но когда вы щелкаете, чтобы открыть одно диалоговое окно, затем закрываете и снова открываете его, на предыдущей странице показывается несколько мс - это может быть очень сложно, если модальный контент сам имеет некоторый поток.

Есть ли шанс исправить это или какой-нибудь альтернативный сценарий, который соответствует нашим потребностям?

Ответы [ 2 ]

0 голосов
/ 21 июня 2011

Я использую этот простой модал.

Это действительно очень легко настроить, если вы ищете быстрый и легкий модал.

http://deseloper.org/read/2008/04/a-simple-modal/

Дайте егопопыткаЭто хорошо работает для меня.

Спасибо

0 голосов
/ 21 июня 2011

решение довольно простое: 

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

все же ... меня интересует любая альтернатива!

...