Question

目前，我们使用blockUI获取模态iframe，使用jquery UI dialog获取模态“是/否” - 对话框。
我们使用这两个组件的原因是

他们都依赖于jquery UI主题 - 所以这两种模态元素之间没有中断。
使用jquery UI对话框获取“是/否”-dialogs并将事件附加到这些按钮非常容易
blockUI实际上更轻量级

我们正在寻找替代方案，因为代码用于获取模态iframe有点儿错误：

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

它工作得很好，但是当点击打开一个对话框，然后关闭并重新打开它时，它会显示前一页有些ms - 如果模态内容本身有一些流程，这可能非常棘手。

有没有机会修复它，或者在那里以外的任何替代脚本符合我们的需求？

Answer 1

解决方案非常简单：

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

仍然......我对任何替代方案都很感兴趣！

Answer 2

我使用这个简单模态。

如果您正在寻找快速简便的模态，那么设置真的非常容易。

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

试一试。它对我很有用。

由于

如何修复我的自制模式脚本 - 或者：还有其他选择吗？

2 个答案: