使用javascript淡化身体
[英]Fading the body using javascript
问题描述
从我的问题的标题很明显，我想使用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";
}
};
3 个解决方案
解决方案1
3 2013-12-16 07:12:34
淡入淡出身体的一种常见技术是使用div ，该div会位于弹出窗口之外的所有内容之上。 当您淡入/淡出该div时，它看起来好像身体正在褪色。
在我的小提琴中，弹出窗口的z索引高于白色蒙版。 当您单击弹出窗口时，它将淡出蒙版，因此可以看到主体：
$("#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之间的任何值。
解决方案2
1 已采纳 2013-12-16 07:41:21
你的意思是这样吗？
我正在慢慢降低一个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);
}
编辑：更新小提琴为您的问题的第二部分。
（尽管这是在jQuery中）
解决方案3
1 2013-12-16 08:02:45
我想也许您只需要一个模态对话框。 使用jQuery UI可以很容易地做到这一点。 它不会像常规的alert（）那样阻塞。
<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>
使用 JavaScript 淡入 iframe
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.