Question

我正在尝试创建一个ExtJS模态窗口，但它看起来只覆盖一个id为wrapper的元素（如果存在）。我正在使用liferay，我希望模态对话框占用整个屏幕，所以我宁愿不修改DOM来执行此操作。

有没有办法让它填满整个屏幕，而不仅仅是div.portlet-body？

var dialog;
function openDialog() {
    if (!dialog) {
        var dialogWidth = 800;
        var dialogHeight = 400;
        console.log(windowWidth + " " + windowHeight);
        dialog = new Ext.Window({
            applyTo: 'popup',
            closeAction:'hide',
            plain: true,
            buttons: [
                {
                    text: 'Done',
                    handler: function() {
                        dialog.hide();
                    }
                }
            ],
            items:new Ext.Panel({
                applyTo:'popup-panel'
            }),
            title: 'Some popup',
            layout: 'fit',
            resizable: false,
            draggable: false,
            width: dialogWidth,
            height: dialogHeight,
            modal: true
        });
    }
    dialog.show(this);
}

Answer 1

applyTo: 'popup'

根本不需要这个。 applyTo将模态对话框限制为您在此处引用的对象的父级。

Answer 2

您遇到了一些CSS问题。 Ext JS创建的模态窗口未绑定到任何特定的CSS元素。所以，我确信页面上存在的一个CSS干扰Ext JS并且模式窗口没有正确显示。

ExtJS模态窗口仅涵盖.portlet-body的内容

2 个答案: