HTML / CSS“弹出窗口”窗口和禁用的背景

时间:2010-12-09 09:45:42

标签: javascript html css layout

这是一个愚蠢的问题,因为我找不到合适的关键字,可以通过搜索Google来获得答案。

您知道当您点击链接并且背景变暗并变得无法使用但前景通常有图像或登录框吗?就像雅虎邮件图像显示方法一样,背景中的所有内容都变得灰色透明,图像本身就好了吗?

怎么做的?它叫做什么?

5 个答案:

答案 0 :(得分:5)

通过在JS中动态创建重叠div来完成,例如:

var gab = document.createElement('div');
  gab.setAttribute('id', 'OVER');
  gab.innerHTML='<div class="overlay"><h1>hello</h1></div>';
  document.body.appendChild(gab);

使用像

这样的CSS类
#OVER{width:100%; height:100%; left:0;/*IE*/ top:0; text-align:center; z-index:5; position:fixed; background-color:#fff;}
.overlay {width:100%; z-index:6; left:0;/*IE*/ top:30%; font-color:#cdcdcd; font-size:0.8em; text-align:center; position:fixed; background-color:#000;}

不知道它是怎么称的。

答案 1 :(得分:4)

您想要创建“模态框”或“灯箱”。例子:

答案 2 :(得分:1)

ThickBox的

例如:http://jquery.com/demo/thickbox/

答案 3 :(得分:1)

对于图像和内容我使用prettyphoto

对于文字弹出Dialog

这一切都是使用jquery javascript

完成的

答案 4 :(得分:1)

您可以使用smoothbox以及mootools