追加网站覆盖层 DIV | CSS-Tricks

Chris Coyier

# 2009 年 9 月 6 日

我想知道如果页面滚动，‘fixed’ 定位是否会更好……我不确定，我想我应该更好地测试一下。

Dor

评论的永久链接# 2010 年 2 月 27 日

在这种情况下，position: fixed; 会更好。
kimsoo

评论的永久链接# 2011 年 1 月 24 日

谢谢..^^
Varun

评论的永久链接# 2014 年 5 月 7 日

如果该 div 在 Y 轴上溢出，制作 position:fixed 可能会影响高度……我想是的

Giacomo

# 2010 年 6 月 29 日

非常感谢！我刚发现你的代码片段库，我对它感到非常兴奋！

Artur Ejsmont

# 2010 年 7 月 13 日

谢谢，伙计：-) 既简单又不错

我只是在想，也许可以检查 id 是否存在，然后创建一些备用 id 或中止？

感谢提供不错的示例代码

Ezugudor

评论的永久链接# 2014 年 11 月 23 日

position fixed 将会生效

Ryan

# 2010 年 8 月 23 日

完美！有什么好方法可以利用它，但让一个元素在它上面？我尝试将该元素的 z-index 设置为高于你的，但它仍然变灰了——有什么想法吗？

Sasha

# 2010 年 8 月 27 日

@ryan: ‘上面的’ 元素应该具有 ‘position:relative;’

fuqiang

# 2010 年 9 月 14 日

完美！它真漂亮！

El garch Hicham

# 2011 年 2 月 25 日

干得好，伙计 ;-)

Gerd

# 2011 年 8 月 16 日

我想在以下问题中使用网站覆盖层

我希望在页面加载时看到覆盖层。该页面从数据库收集数据。
当所有数据库加载完成时，覆盖层应该自动消失。

可以做到吗？
还有一个问题：我可以在覆盖层上面放置一个预加载器图像，该图像在页面完全加载后也会消失吗？

谢谢！！

gokul

# 2011 年 9 月 23 日

我想在 jQuery 布局的北部布局中使用一个下拉菜单，如下所示 -
http://layout.jquery-dev.net/demos/popups.html

菜单下拉元素位于布局后面。它不会覆盖布局以从北部面板显示其内容

James

# 2011 年 10 月 3 日

使不透明度在 IE8 中生效的最佳方法是什么？

Rajan_dot_com

评论的永久链接# 2018 年 11 月 29 日

-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70); 试试这个

Karl Groves

# 2011 年 12 月 18 日

有趣的是，您可能会注意到，尽管像这样的代码片段可能会创建一种视觉效果，该效果将覆盖 body 元素并使所有内容不可点击，但这不是某些浏览器处理它的方式。“父”元素中的项目仍然可以通过 tab 和 shift+tab 键进行访问。例如，要将它用于创建模态对话框，您需要创建一个仅在对话框中循环的 tab 顺序，并从文档的其余部分删除点击和按键事件。

Justin

# 2012 年 3 月 6 日

所有内容仍然变灰。我尝试过 position relative，但这不奏效。

ShaoKhan

# 2012 年 4 月 13 日

也许你应该添加

'-ms-filter' : 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)',
 'filter': 'alpha(opacity=50)',

到你的 IE 浏览器 CSS 中。

但是……一个不错的代码片段。

hayesmaker

评论的永久链接# 2013 年 5 月 7 日

不是真的，没人关心 IE 了。

Yugal Jindle

# 2012 年 4 月 16 日

你把它变得如此简单……为什么我之前没有想到呢？

超级喜欢.. **

Jose

# 2012 年 7 月 20 日

如何为这个覆盖层 div 编写仅在 iPad 上显示的 CSS 代码？我正在尝试为仅 iPad 用户设置此功能……

谢谢！

Jules Mazur

评论的永久链接# 2012 年 9 月 17 日

我可以建议使用 PHP-Mobile-Detect 吗？我用它为各种平台加载备用的外部样式表，但完全有可能用它来echo备用代码，例如，如果脚本检测到 iPad 或其他平板电脑，则可以执行此代码片段。它使用条件注释，因此很容易掌握它。
Ryan Burnette

评论的永久链接# 2012 年 10 月 10 日

我希望我知道一种非基于 PHP 的嗅探 iOS 的方法。

jamie paterson

# 2012 年 11 月 14 日

条件媒体查询怎么样？

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}

在这里找到

iPad 特定 CSS

pankaj

# 2012 年 10 月 25 日

谢谢

Peter

# 2013 年 2 月 7 日

你如何关闭它？尝试过所有方法，包括

$(‘body #overlay’).css(‘display’, ‘none’);

但没有得到结果……

Dan

# 2013 年 2 月 21 日

Peter

1- $(“#overlay”).remove();

2 -$(“#overlay”).hide();

Peter

评论的永久链接# 2013 年 2 月 21 日

谢谢！我上周弄明白了……我想我本可以把它记下来，这样就不会浪费别人的脑力了……:)
Peter

评论的永久链接# 2013 年 2 月 21 日

顺便说一下，这些天有更好的方法吗？

我们在 IOS 上遇到了这个问题
输入用户/密码后——键盘保持打开状态，然后按提交——键盘关闭，覆盖层不会充满整个屏幕。

谢谢！

Karthik Kumar

# 2013 年 3 月 5 日

不需要查找文档高度，直接赋予它即可 
.overlay{ opacity : 0.4; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: black; z-index: 500; } 然后只需添加 $("#overlay").addClass('overlay');

Karthik Kumar

# 2013 年 3 月 5 日

不需要查找文档高度，直接赋予它即可 
.overlay{ opacity : 0.4; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: black; z-index: 500; }
 
然后只需添加 
$("#overlay").addClass('overlay');

luchid

# 2013 年 5 月 10 日

我想使用覆盖层来阻止用户查看内容，直到他们注册。如何在用户按下登录后关闭覆盖层？

KevinOrin

# 2013 年 6 月 12 日

经过一些修改后，这个方法很有效。
如果有人希望弹出窗口固定并在页面中央（这样您就无法滚动到它的下方）。
.collapse {
position: fixed;
width: 700px; （您可以更改这个）
margin-left: -350px; （如果您更改宽度，将此值设为宽度的二分之一）
left: 50%;
top: 0;
}
谢谢！

Lance Blackstrong

# 2013年7月17日

非常感谢！您太棒了。

uananddbz

# 2013年8月31日

为什么我们不使用 min-height:100% ?

Tor

# 2013年9月5日

嗨，我已经让代码运行起来，但是我想添加一个功能，用于“点击”它（关闭遮罩）。我对编码很陌生，有人能给我一些关于如何修复它的提示吗？

太棒了

# 2013年9月9日

您的技术不仅使用了 JavaScript（我的天，您在示例中看到的第一件事就是一个指向 javascript:void() 的链接！），而且在禁用 JavaScript 的情况下它也无法使用，而这正是替代方案的优势所在。

老实说，我不明白这有什么意义。

hossein ghorbani

# 2013年9月13日

BlockUI 的遮罩？调用它之后如何关闭它？
我的 Jquery 代码是

$(document).ready(function(e) {
$(“.mus_play > div”).click(function(){
$(function() {
var docHeight = $(document).height();
$(“body”).append(”

“);

        $("#overlay")
            .height(docHeight)
            .css({
                 'opacity' : 0.7,
                 'position': 'fixed',
                 'top': 0,
                 'left': 0,
                 'background-color': 'black',
                 'width': '100%',
                 'z-index': 5000
              });
        }); 
    });
});

mark

# 2013年11月16日

致 Luchid（上面）以及像他一样的其他网站管理员：为什么不直接在您的主页上添加一段文字，说明查看您的网站需要注册？那些遮罩太烦人了，而且一点也不像您想象的那么酷。当页面加载或点击或悬停时，弹出这些不需要的东西真的很让人恼火。

Evrim

# 2014年3月25日

为什么使用 $("#overlay").height($(document).height()); 而不是 $("#overlay").css({height:'100%'});？

是能力问题吗？

谢谢

太棒了

# 2014年6月16日

经过一些修改后，这个方法很有效。
如果有人希望弹出窗口固定并在页面中央（这样您就无法滚动到它的下方）。
.collapse {
position: fixed;
width: 700px; （您可以更改这个）
margin-left: -350px; （如果您更改宽度，将此值设为宽度的二分之一）
left: 50%;
top: 0;
}
谢谢！

主题

# 2014年6月30日

无需查找文档高度，直接给出高度即可

.overlay{
opacity : 0.4;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: black;
z-index: 500;
}

然后只需添加

$(“#overlay”).addClass(‘overlay’);

键盘

# 2014年7月6日

你如何关闭它？尝试过所有方法，包括

$(‘body #overlay’).css(‘display’, ‘none’);

但没有得到结果……

clif

# 2014年7月7日

如何从头到尾实现这个？
谢谢！
新手

老挝语键盘

# 2014年8月31日

我想使用覆盖层来阻止用户查看内容，直到他们注册。如何在用户按下登录后关闭覆盖层？

Chintan Parikh

# 2014年12月5日

有没有更好的方法用纯 JavaScript 实现它？

Stan

# 2015年8月12日

如何在 Weebly 网站上使用它？

Emran

# 2016年2月15日

非常感谢！

评论

发表评论 取消回复

发表评论取消回复