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添加到隐藏/关闭功能。

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

Answer 2

在HTML中添加

 <div style="z-index:99" class="black_overlay1 off" id="black_overlay_loader"></div>
    <div id="loader" class="off" > </div>

在脚本中添加此内容（jquery）

function overlay(){
    $("#loader").removeClass("off").addClass("on");
    $("#black_overlay_loader").removeClass("off").addClass("on");
}

在您的课程中添加

.black_overlay1{position: fixed;_position:absolute;top:0%;left:0%;width:100%;height: 100%;background:black;z-index:1001;-moz-opacity:0.3;opacity:.30;filter:alpha(opacity=30);
overflow: hidden}

.off{display:none}
.on{ 
/*empty*/
  }

你可以获得黑色模糊背景..然后编辑你的CSS以获得你需要的精确外观

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

2 个答案: