Javascript 如何淡化背景_Javascript_Html_Css

Javascript 如何淡化背景

javascript html css

Javascript 如何淡化背景,javascript,html,css,Javascript,Html,Css,我本来想看看怎么做的，但我真的不知道怎么称呼它来查找，所以我希望我能在这里描述一下，有人能给我指出正确的方向。不管怎样，我在寻找如何在网站上做到这一点，当你点击某个东西时，一个新的分类层弹出并淡出背景。我看到网站一直在这样做，但我不知道如何做到这一点。一点指引就好了。它被称为灯箱。您可以。您可以使用。CSS Tricks有一个名为“带jQuery的颜色褪色菜单”的教程。我敢肯定你指的是通常被称为模态对话框的东西（这是一个有点误导性的术语）…可以找到一个不错的jQuery演示版。这里有一篇关于C

我本来想看看怎么做的，但我真的不知道怎么称呼它来查找，所以我希望我能在这里描述一下，有人能给我指出正确的方向。

不管怎样，我在寻找如何在网站上做到这一点，当你点击某个东西时，一个新的分类层弹出并淡出背景。我看到网站一直在这样做，但我不知道如何做到这一点。一点指引就好了。

它被称为灯箱。您可以。

您可以使用。CSS Tricks有一个名为“带jQuery的颜色褪色菜单”的教程。

我敢肯定你指的是通常被称为模态对话框的东西（这是一个有点误导性的术语）…可以找到一个不错的jQuery演示版。

这里有一篇关于CSS中不透明性的ppk文章：

应该能帮你一点忙：）

我想你也需要使用javascript，才能做到这一点

以下是一种使背景淡入淡出的jQuery方法，称为BlockUI：

您可以使用Javascript函数解决此问题：

function ShowNewPanel()
{
var new_panel = document.getElementById(’new_panel’);
// w is a width of the new panel
w = 300;
// h is a height of the new panel
h = 300;
// get the x and y coordinates to center the new panel
xc = Math.round((document.body.clientWidth/2)-(w/2))
yc = Math.round((document.body.clientHeight/2)-(h/2))
// show the newsletter panel
new_panel.style.left = xc + “px”;
new_panel.style.top = yc + “px”;
new_panel.style.display = ‘block’;
}

正如您所看到的，我们首先要确定坐标，该坐标将使输入面板在页面上居中。更新面板的宽度和高度可以根据您的需要进行更改，但请记住，您需要在CSS和此函数中更改这些值

对于黑屏本身，在CSS中使用类似的内容：

filter:alpha(opacity=80);
opacity: 0.8;

更多信息。

如果您想避免JavaScript库的重量，下面是一个工作示例，您可能会发现它很有启发性，它基于我多次使用的一些自制代码

<html>
<head>
<style type="text/css">
  #helloWorld {
    position:absolute;
    margin:2em;padding:2em;
    border:1px solid #000;
    background-color:#ccd;
    opacity:0;
    filter:alpha(opacity=0.0); }
</style>

<script type='text/javascript'>

  function setOpacity( elem, amount ) {
    if ( amount > 1.0 )
      amount = 1.0

  /*@cc_on
    @if (@_jscript)
    // This is For Internet Explorer Only
    //
            elem.style.filter = "alpha(opacity=" + Math.round( amount * 100 ) + ")";
    @else*/
    // for all other browsers
    //
            elem.style.opacity = amount;
  /*@end
    @*/
  }
  // endOpacity ranges from 0.0 to 1.0
  // fade time is in seconds
  function fadeIn( elem, endOpacity, fadeTime ) {
    var startTime = (new Date()).getTime();
    var fadeTimer = null;

    var fadeStep = function() {
      var elapsedTime = (new Date()).getTime() - startTime;
      var opacity = endOpacity * elapsedTime / (fadeTime * 1000.0);
      if ( opacity >= endOpacity ) {
        opacity = endOpacity 
        clearInterval( fadeTimer );
      }
      setOpacity( elem, opacity );
    }
    fadeTimer = setInterval( fadeStep, 40 ) // with luck = 25 frames per second
  }

  window.onload = function() { 
    var elem = document.getElementById( 'helloWorld' );
    var clickMe = document.getElementById( 'clickMe' );
    clickMe.onclick = function() {
      fadeIn( elem, 0.8, 2.0 ); // fade to 80% over 2 seconds
    }
  }

</script>
</head>
<body>

<div id="helloWorld"><h1>Hello World</h1></div>

<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>

<p><input id='clickMe' type='button' value='Click me please' /></p>

</body>
</html>


#地狱世界{
位置：绝对位置；
边距：2米；填充：2米；
边框：1px实心#000；
背景色：#ccd；
不透明度：0；
过滤器：alpha（不透明度=0.0）；}
函数设置不透明度（元素、数量）{
如果（金额>1.0）
金额=1.0
/*@抄送
@如果（@_jscript）
//这仅适用于Internet Explorer
//
elem.style.filter=“alpha（不透明度=“+Math.round（amount*100）+”）；
@否则*/
//适用于所有其他浏览器
//
elem.style.opacity=数量；
/*@结束
@*/
}
//内产能范围为0.0到1.0
//淡出时间以秒为单位
功能fadeIn（元素、内产能、fadeTime）{
var startTime=（新日期（））.getTime（）；
var fadeTimer=null；
var fadeStep=函数（）{
var elapsedTime=（新日期（））.getTime（）-startTime；
var不透明度=内容*持续时间/（衰减时间*1000.0）；
如果（不透明度>=内容）{
不透明度=内容
清晰间隔（衰减时间）；
}
setOpacity（elem，opacity）；
}
fadeTimer=setInterval（fadeStep，40）//运气为每秒25帧
}
window.onload=函数（）{
var elem=document.getElementById（'helloWorld'）；
var clickMe=document.getElementById（'clickMe'）；
clickMe.onclick=函数（）{
fadeIn（elem，0.8，2.0）；//在2秒内衰减到80%
}
}
你好，世界
lorem ipsum blah blah dum de dum quick brown fox等
lorem ipsum blah blah dum de dum quick brown fox等
lorem ipsum blah blah dum de dum quick brown fox等
lorem ipsum blah blah dum de dum quick brown fox等
lorem ipsum blah blah dum de dum quick brown fox等
lorem ipsum blah blah dum de dum quick brown fox等

使用

您可以使用for jQuery。我已经在许多项目中成功地使用了它

它使用起来并不难，而且非常灵活。

document.body.clientHeight是不可移植的，它只在IE的“怪癖”模式下工作。（你不需要怪癖模式！）对于IE6+/标准，使用document.documentElement.clientWidth/Height；对于所有其他浏览器，使用window.innerWidth/Height。“我看到网站总是这样做”提供链接会很有帮助。