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";

在你的功能上添加这一行

javascript使图像灰色周围的空间

1 个答案: