jQuery：如何创建一个简单的叠加层？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1718951/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: How can i create a simple overlay?
提问by aoghq
How can I create a really basic overlay in jQuery without UI?
如何在没有 UI 的情况下在 jQuery 中创建真正基本的叠加层？
What is a lightweight plugin?
什么是轻量级插件？
回答by Frankie
An overlay is, simply put, a divthat stays fixed on the screen(no matter if you scroll) and has some sort of opacity.
覆盖是，简单地说，一个div是撑固定在屏幕上（不管你滚动），并具有某种不透明度。
This will be your CSS for cross browser opacity of 0.5:
这将是跨浏览器不透明度为 0.5 的 CSS：
#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;
}
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.
这将是您的 jQuery 代码（不需要 UI）。您只需创建一个 ID 为 #overlay 的新元素。您只需要创建和销毁 DIV。
var overlay = jQuery('<div id="overlay"> </div>');
overlay.appendTo(document.body)
For performance reasonsyou might wanna have the DIV hidden and setting the display to block and noneas you need it or not.
出于性能原因，您可能希望隐藏 DIV 并将显示设置为阻止和不显示，无论您是否需要。
Hope it helps!
希望能帮助到你！
Edit:As @Vitaly so well put it, be sure to check your DocType. Read more on the comments on his findings..
编辑：正如@Vitaly 所说的那样，请务必检查您的 DocType。阅读更多关于他的发现的评论..
回答by Tony Brix
Here is a simple javascript only solution
这是一个简单的javascript唯一解决方案
function displayOverlay(text) {
$("<table id='overlay'><tbody><tr><td>" + text + "</td></tr></tbody></table>").css({
"position": "fixed",
"top": 0,
"left": 0,
"width": "100%",
"height": "100%",
"background-color": "rgba(0,0,0,.5)",
"z-index": 10000,
"vertical-align": "middle",
"text-align": "center",
"color": "#fff",
"font-size": "30px",
"font-weight": "bold",
"cursor": "wait"
}).appendTo("body");
}
function removeOverlay() {
$("#overlay").remove();
}
Demo:
演示：
http://jsfiddle.net/UziTech/9g0pko97/
http://jsfiddle.net/UziTech/9g0pko97/
Gist:
要旨：
回答by wloescher
Here's a fully encapsulated version which adds an overlay (including a share button) to any IMG element where data-photo-overlay='true.
这是一个完全封装的版本，它为 data-photo-overlay='true 的任何 IMG 元素添加了一个覆盖（包括一个共享按钮）。
JSFiddlehttp://jsfiddle.net/wloescher/7y6UX/19/
JSFiddle http://jsfiddle.net/wloescher/7y6UX/19/
HTML
HTML
<img id="my-photo-id" src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" alt="Photo" data-photo-overlay="true" />
CSS
CSS
#photoOverlay {
background: #ccc;
background: rgba(0, 0, 0, .5);
display: none;
height: 50px;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 50px;
z-index: 1000;
}
#photoOverlayShare {
background: #fff;
border: solid 3px #ccc;
color: #ff6a00;
cursor: pointer;
display: inline-block;
font-size: 14px;
margin-left: auto;
margin: 15px;
padding: 5px;
position: absolute;
left: calc(100% - 100px);
text-transform: uppercase;
width: 50px;
}
JavaScript
JavaScript
(function () {
// Add photo overlay hover behavior to selected images
$("img[data-photo-overlay='true']").mouseenter(showPhotoOverlay);
// Create photo overlay elements
var _isPhotoOverlayDisplayed = false;
var _photoId;
var _photoOverlay = $("<div id='photoOverlay'></div>");
var _photoOverlayShareButton = $("<div id='photoOverlayShare'>Share</div>");
// Add photo overlay events
_photoOverlay.mouseleave(hidePhotoOverlay);
_photoOverlayShareButton.click(sharePhoto);
// Add photo overlay elements to document
_photoOverlay.append(_photoOverlayShareButton);
_photoOverlay.appendTo(document.body);
// Show photo overlay
function showPhotoOverlay(e) {
// Get sender
var sender = $(e.target || e.srcElement);
// Check to see if overlay is already displayed
if (!_isPhotoOverlayDisplayed) {
// Set overlay properties based on sender
_photoOverlay.width(sender.width());
_photoOverlay.height(sender.height());
// Position overlay on top of photo
if (sender[0].x) {
_photoOverlay.css("left", sender[0].x + "px");
_photoOverlay.css("top", sender[0].y) + "px";
}
else {
// Handle IE incompatibility
_photoOverlay.css("left", sender.offset().left);
_photoOverlay.css("top", sender.offset().top);
}
// Get photo Id
_photoId = sender.attr("id");
// Show overlay
_photoOverlay.animate({ opacity: "toggle" });
_isPhotoOverlayDisplayed = true;
}
}
// Hide photo overlay
function hidePhotoOverlay(e) {
if (_isPhotoOverlayDisplayed) {
_photoOverlay.animate({ opacity: "toggle" });
_isPhotoOverlayDisplayed = false;
}
}
// Share photo
function sharePhoto() {
alert("TODO: Share photo. [PhotoId = " + _photoId + "]");
}
}
)();
回答by Pablo Rodriguez V.
Please check this jQuery plugin,
请检查这个jQuery插件，
with this you can overlay all the page or elements, works great for me,
有了这个，您可以覆盖所有页面或元素，对我来说非常有用，
Examples:
Block a div:
$('div.test').block({ message: null });
示例： 阻止一个 div：
$('div.test').block({ message: null });
Block the page:
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
Hope that help someone
屏蔽页面：
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
希望对某人有所帮助
Greetings
你好
回答by Dan Breen
If you're already using jquery, I don't see why you wouldn't also be able to use a lightweight overlay plugin. Other people have already written some nice ones in jquery, so why re-invent the wheel?
如果您已经在使用 jquery，我不明白您为什么不能使用轻量级覆盖插件。其他人已经在 jquery 中写了一些不错的东西，那么为什么要重新发明轮子呢？
回答by Jacob
By overlay do you mean content that overlaps/covers the rest of the page? In HTML, you could do this by using a div that uses absolute or fixed positioning. If it needed to be generated dynamically, jQuery could simply generate a div with the position style set appropriately.
覆盖是指重叠/覆盖页面其余部分的内容吗？在 HTML 中，您可以通过使用使用绝对或固定定位的 div 来做到这一点。如果需要动态生成，jQuery 可以简单地生成一个具有适当设置的位置样式的 div。
回答by Illianthe
What do you intend to do with the overlay? If it's static, say, a simple box overlapping some content, just use absolute positioning with CSS. If it's dynamic (I believe this is called a lightbox), you can write some CSS-modifying jQuery code to show/hide the overlay on-demand.
你打算用叠加层做什么？如果它是静态的，比如说，一个简单的盒子与一些内容重叠，只需使用 CSS 的绝对定位。如果它是动态的（我相信这称为灯箱），您可以编写一些 CSS 修改 jQuery 代码来按需显示/隐藏叠加层。
