jQuery：我怎样才能创build一个简单的覆盖？
如何在没有UI的jQuery中创build一个真正基本的覆盖？
什么是轻量级插件？
一个叠加，简单地说，是一个固定在屏幕上的 div （不pipe是否滚动），并具有某种不透明度。
这将是你的跨浏览器不透明度为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; }
这将是你的jQuery代码（不需要用户界面）。 你只要用ID #overlay创build一个新的元素。 创build和销毁DIV应该是你所需要的。
var overlay = jQuery('<div id="overlay"> </div>'); overlay.appendTo(document.body)
出于性能原因，您可能希望将DIV隐藏起来， 并将显示屏设置为阻止状态，并且不需要它。
希望能帮助到你！
编辑：如@Vitaly这么好，把它，一定要检查你的DocType。 阅读更多关于他的研究结果的意见..
这是一个简单的JavaScript解决scheme
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(); }
演示：
http://jsfiddle.net/UziTech/9g0pko97/
要旨：
如果你已经使用jQuery，我不明白为什么你也不能使用轻量级的覆盖插件。 其他人已经写了一些很好的jQuery中，为什么重新发明轮子？
这里有一个完全封装的版本，它向data-overlay = true的任何IMG元素添加覆盖（包括分享button）。
JSFiddle http://jsfiddle.net/wloescher/7y6UX/19/
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
#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的
(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 + "]"); } } )();
通过重叠，你的意思是重叠/覆盖页面的其余部分的内容？ 在HTML中，你可以通过使用绝对定位或固定定位的div来实现。 如果需要dynamic生成，jQuery可以简单地生成一个适当的位置样式设置的div。
你打算怎么做覆盖？ 如果它是静态的，比如说，一个简单的盒子重叠了一些内容，那么就使用绝对定位和CSS。 如果它是dynamic的（我相信这被称为一个灯箱），你可以写一些CSS修改的jQuery代码来显示/隐藏覆盖按需。
请检查这个jQuery插件，
blockUI
有了这个，你可以覆盖所有的页面或元素，对我很好，
例子：阻止一个div： $('div.test').block({ message: null });
阻止页面： $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); 希望帮助别人
问候
