Question

我会查找如何做到这一点，但我真的不知道该怎么称呼它，所以我希望我能在这里描述它，有人可以指出我正确的方向。无论如何，我正在寻找如何在网站上制作它，当你点击某个东西时，弹出一个新的sorta层并淡化背景。我看到网站一直这样做，但我不知道该怎么做。一点指导就会很棒。

Answer 1

它被称为灯箱。你可以Google for that term。

Answer 2

如果您想避免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>

Answer 3

使用shadowbox !!!

Answer 4

这是一篇关于ppss中不透明度的文章：http://www.quirksmode.org/css/opacity.html

应该帮助你一点：）

Answer 5

您可以使用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;

有关此here的详情。

Answer 6

您可以将SimpleModal plugin用于jQuery。我在很多项目上成功使用过它。

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

Answer 7

您可以使用jQuery执行此操作。 CSS Tricks有一个名为颜色渐变菜单的教程，带有jQuery here。

Answer 8

我很确定你的意思是什么通常被称为模态对话框（这是一个有点误导性的术语）......可以找到一个像样的jquery演示here

Answer 9

我认为你还需要使用javascript，才能实现这一目标。

这是一种使背景淡入淡出的jQuery方法，称为BlockUI： http://malsup.com/jquery/block/

如何淡化背景

9 个答案: