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时，看起来身体正在消失。

在我的小提琴中，弹出窗口的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;
}

opacity: 0.9使遮罩半透明。您可以将其更改为1到0之间的任何值。

请参阅http://jsfiddle.net/WaPXN/1/

Answer 2

你的意思是这样吗？

DEMO

我正在慢慢减少一个div的不透明度（可以包含所有背景内容），而另一个div（可以包含不应该褪色的内容）保持不变

document.getElementById('btn').onclick = function () {
    fade.style.opacity = 1;
    var h = setInterval(function () {
        if (fade.style.opacity > 0.3) {
            fade.style.opacity -= 0.1;            
        } else {
            clearInterval(h);
            alert('some text');
        }
    }, 100);
}

编辑：更新问题第二部分的小提琴。

DEMO2

（虽然这是在jQuery中）

Answer 3

我想也许你只想要一个模态对话框。这可以通过jQuery UI轻松完成。它不会像常规警报一样阻止（）。

<script>
var showAlert = function() {
    $("#dialog-confirm").dialog({
        resizable: false,
        modal: true,
        buttons: {
            "OK": function() {
                // Your code here
                $(this).dialog("close");
            }
        }
    });
};
$(function() {
    showAlert();
});

<body>
    <div>background</div>
    <div id="dialog-confirm" title="Alert">Lorem Ipsum</div>
</body>

EXAMPLE

使用javascript淡化身体

3 个答案: