使用javascript褪色身體

從我的問題的標題可以清楚地看到，我想使用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"; 
    } 

    };

來源

2013-12-16 R R

儘量'document.body.style.opacity =「0.3''當所示的警報對話框。重置值爲1後 – tewathia

@tewathia感謝您的回覆，但我想要的是在任何情況下，當顯示警告框時，身體應該褪色。 –

我不知道我明白。當警報框彈出時，你想讓身體慢慢淡出嗎？試試'document.body.style.opacity = 1; var h = setInterval（function（）{if（document.body.style.opacity> 0.3）{document。body.style.opacity- = 0.1;} else {clearInterval（h）;}}，100）' – tewathia

你的意思是這樣的，您可以將其更改爲1和0

之間的任意值見？

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中雖然）

來源

2013-12-16 07:41:21 tewathia

我會接受它，但最後一個問題假設我不想褪色的錶行內容是我想要的div內淡出比我將如何處理這種情況？ –

查看我對想法的更新問題 –

您必須爲不同類別的表格（您不想淡出）選擇不同的類別，然後在減少不透明度的同時跳過它。像'document.querySelectorAll（'＃fade *：not（.noFade）'）''。然後在onclick函數中解析每個選中的元素。 – tewathia

的常用技術褪色的身體是用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使面膜半透明。 http://jsfiddle.net/WaPXN/1/

來源

2013-12-16 07:12:34

感謝您的答案，但這不是我想要的，我想要的是當顯示警告框時，身體應該褪色，只有警報框可見。 –

褪色你的意思是半透明的？ –

是osi褪色我的意思是半透明 –

我想，也許你只是想要一個模式對話框。這可以通過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

來源

2013-12-16 08:02:45

使用javascript褪色身體

回答

相關問題