jQuery:如何创建简单的叠加层? [英] jQuery: How can i create a simple overlay?

问题描述

如何在没有UI的情况下在jQuery中创建一个非常基本的叠加层?

How can I create a really basic overlay in jQuery without UI?

什么是轻量级插件?

推荐答案

简单地说，叠加层是div，它保持固定在屏幕上(无论是否滚动)并具有某种不透明性.

An overlay is, simply put, a div that stays fixed on the screen (no matter if you scroll) and has some sort of opacity.

这将是您的跨浏览器不透明度为0.5的CSS:

This will be your CSS for cross browser opacity of 0.5:

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 10000;
}

这将是您的jQuery代码(无需用户界面).您将要创建一个ID为#overlay的新元素. 创建和销毁DIV应该是您所需要的.

This will be your jQuery code (no UI needed). You're just going to create a new element with the ID #overlay. Creating and destroying the DIV should be all you need.

var overlay = jQuery('<div id="overlay"> </div>');
overlay.appendTo(document.body)

出于性能方面的原因，您可能希望隐藏DIV，并根据需要将显示设置为不显示或不显示.

For performance reasons you might wanna have the DIV hidden and setting the display to block and none as you need it or not.

希望有帮助！

正如@Vitaly所说的那样，请务必检查您的DocType.阅读有关他的发现的评论的更多信息.

As @Vitaly so well put it, be sure to check your DocType. Read more on the comments on his findings..

这篇关于jQuery:如何创建简单的叠加层?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！