javascript - 使用 javascript 淡入淡出主体

Question

从我的问题标题可以清楚地看出，我想使用 javascript 淡入淡出正文。简而言之，我想要做的是我想在屏幕上显示一个警报框，除了警报框之外，整个主体背景都会淡出。是否可以使用javascript？

到目前为止我尝试过的:

HTML:

<tr><td><table class="popup" style="font-size:12px;border-bottom:1px solid #482C1F !important; text-align: center !important;top:-10000px;position:absolute;" id="nameFieldPopup" border="0" cellpadding="0" cellspacing="0">

  <div id="dontfade">  
<tr><td align="left" style="padding-left:10px; padding-top:30px; " id="detailstd"></td></tr>
<tr><td align="right"><input type="button" name="ok" value="OK" onClick="closepopup();"></td></tr>
    </table></td></tr>
</tr>
</div>
</div>

Javascript:

    window.onload=function(){
    moduleidvar=<?php echo $moduleid?>;
    alert(moduleidvar);
    if (moduleidvar==-1) {
     var tdControl = document.getElementById("detailstd");
     tdControl.innerHTML = "eNPS is een moderne
     en efficiënte manier voor het meten van medewerker bevlogenheid.In een  ";

    document.getElementById('nameFieldPopup').style.top="";
    document.getElementById('nameFieldPopup').style.visibility = "visible";  
    }

    };

Answer 1

淡化正文的一种常见技术是使用 div ，它位于除弹出窗口之外的所有内容之上。当您淡入/淡出此 div 时，看起来主体正在淡出。

在我的 Fiddle 中，弹出窗口的 z-index 高于白色蒙版。当您单击弹出窗口时，它将淡出蒙版，以便主体可见:

$("#popup").click(function() {
    $("#mask").fadeOut();
    $(this).hide();
});

掩码的创建方式为:

#mask {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    position: absolute;
    opacity: 0.9;
}

不透明度:0.9 使蒙版半透明。您可以将其更改为 1 到 0 之间的任何值。

参见http://jsfiddle.net/WaPXN/1/