javascript使图像周围的空间变灰

Question

在我的页面上，如果用户单击一个按钮，图像将出现在页面中间。现在我还希望图像周围的空间(整个剩余页面)显示为灰色。我尝试了以下代码，但它不起作用。

function showLoading(){
    $.blockUI({ css: { 
        border: 'none', 
        padding: '15px', 
        backgroundColor: '#000', 
        '-webkit-border-radius': '10px', 
        '-moz-border-radius': '10px', 
        opacity: .5, 
        color: '#fff' 
    } }); 
document.getElementById("loading").style["visibility"] = "visible";
}

jquery代码不会被执行。我怎样才能在javascript中执行这个？我尝试使用 write.line("<style>...</style>") , 但这都不起作用。

Answer 1

您可以根据您的要求为绝对位置更改 z-index 制作 div

<div id="overlay" style="width:100%;height:100%;position:absolute;left:0;top:0;z-index:100;display:none;background-color:#000;opacity:.5"></div>

当点击按钮时显示

document.getElementById("overlay").style.display="block";

在你的函数中添加这一行