Question

可能在Primefaces中锁定模态的背景吗？

在示例基本中，当您向下滚动时，除了对话框外，所有屏幕都会移动。但是，我需要锁定身体，因为对话框内的所有组件都在背景中与身体一起移动。

http://www.primefaces.org/showcase/ui/overlay/dialog/basic.xhtml

我使用modal =＆＃34; true＆＃34;但它只是改变了背景颜色。

Answer 1

我在Primefaces 5中找到了另一个解决这个问题的方法。

当我滚动时，我只修复了浮动在屏幕上的所有组件。

所以，我重写了它：

.ui-selectonemenu-panel {
    position: fixed  !important;
}

.ui-selectcheckboxmenu-panel{
    position: fixed !important;
}

我已经在背景中滚动了，但是打开时所有组件都没有浮动。

Answer 2

我有另一个解决方案，我定义了两个javascript函数

function ovBodyAuto(){
    $('html, body').css('overflow', 'auto');
}

function ovBodyHidden(){
    $('html, body').css('overflow', 'hidden');
}

我的primeface对话框看起来像这样

<p:dialog widgetVar="detail" showEffect="explode" width="1200" height="600" 
         modal="true" hideEffect="explode" onShow="ovBodyHidden();" onHide="ovBodyAuto();">
</p:dialog>

它可能看起来不是一种优雅的方式，但它适用于我。

Answer 3

使用@mismanc答案有更优雅的方法。无需在每个对话框中调用onShow和onHide。

首先，在Primefaces 5.3+和6.0上，在layout.js中，有一个如下的脚本：

if(window['PrimeFaces'] && window['PrimeFaces'].widget.Dialog) {
    PrimeFaces.widget.Dialog = PrimeFaces.widget.Dialog.extend({

        enableModality: function() {
            this._super();
            $(document.body).children(this.jqId + '_modal').addClass('ui-dialog-mask');
        },

        syncWindowResize: function() {}
    });
}

只需在 enableModality 上添加代码以设置溢出隐藏，并在 disableModality 上设置溢出自动，就像这样：

if(window['PrimeFaces'] && window['PrimeFaces'].widget.Dialog) {
    PrimeFaces.widget.Dialog = PrimeFaces.widget.Dialog.extend({

        enableModality: function() {
            this._super();
            $(document.body).children(this.jqId + '_modal').addClass('ui-dialog-mask');
            $('html, body').css('overflow', 'hidden');
        },
        disableModality: function() {
            this._super();
            $('html, body').css('overflow', 'auto');
        },

        syncWindowResize: function() {}
    });
}

Answer 4

当您的模态可见时，您应该使用body{overflow:hidden;}

Answer 5

首先，您应该确保form超出dialog。

然后为了防止在打开对话框时滚动背景屏幕，你应该在对话框的打开和关闭时使用一些javascript，这是一个例子：

<强> 的Javascript

/**
* Disable Scroll
*  left: 37, up: 38, right: 39, down: 40,
*  spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
*/

var scrollKeys = [ 37, 38, 39, 40 ];

function scrollPreventDefault(e) {
   e = e || window.event;
   if (e.preventDefault)
       e.preventDefault();
   e.returnValue = false;
}

function scrollKeydown(e) {
   for ( var i = scrollKeys.length; i--;) {
       if (e.keyCode === scrollKeys[i]) {
           scrollPreventDefault(e);
           return;
       }
   }
}

function sctollWheel(e) {
   scrollPreventDefault(e);
}

/**
* This would be called on "onShow" in order to disable the background scrolling
*/
function disableScroll() {
   if (window.addEventListener) {
       window.addEventListener('DOMMouseScroll', sctollWheel, false);
   }
   window.onmousewheel = document.onmousewheel = sctollWheel;
   document.onkeydown = scrollKeydown;
}

/**
* This would be called on "onHide" in order to enable the background scrolling
*/
function enableScroll() {
   if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', sctollWheel, false);
   }
   window.onmousewheel = document.onmousewheel = document.onkeydown = null;
}

/**
* End Disable Scroll
*/

将上面的javascript代码放在外部js文件中并将其包含在您的页面中，然后：

<强> XHTML

<p:lightBox onShow="disableScroll()" onHide="enableScroll()">

或

<p:dialog onShow="disableScroll()" onHide="enableScroll()">

希望这有帮助。

在Primefaces中使用对话框时锁定正文（背景）

5 个答案: