javascript - 当对话框窗口打开时使父页面模糊

Question

当我点击一个按钮时，我需要显示一个弹出窗口，弹出窗口正在打开，一旦打开，我需要模糊后端页面。

我的脚本

function showDialogBox() {
    $("#divSample").dialog({
        autoOpen: false,
        bgiframe: true,
        Height: 500,
        width: 500,

        modal: false,
        draggable: true,
        resizable: false,
        position: 'center',
        show: {
            effect: "fade",
            duration: 1000
        },
        hide: {
            effect: "fade",
            duration: 500
        }


    });
    $("#divSample").dialog("open");


}

谢谢

Answer 1

一个简单的解决方案是更改父页面的不透明度 - 例如，当对话框打开时将其降低到 0.3，当对话框关闭时将其返回到 1。如果您想防止在对话框打开时点击父级，请将 pointer-events: none 添加到 show 函数，并将 pointer-events:auto 添加到 hide/close功能。

function showDialogBox() {
$('#parent_page').css({'opacity': 0.3, 'pointer-events': 'none'})
//rest of function
}

function hideDialogBox() {
$('#parent_page').css({'opacity': 1, 'pointer-events': 'auto'})
//rest of function
}

FIDDLE