为了突出显示某个 p 元素，我编写了一些 JS 使其显示在黑暗的背景之上。
为了做到这一点，我使用 jQuery 创建了一个叠加层，然后克隆了信息 p 元素并将其绝对定位在叠加层上。
因为它删除了一些 CSS 属性(由于页面中的新位置而没有被继承)，我使用 jQuery 来添加它们。
它几乎完美地工作。在我的 Mac OS X 上的 Firefox 3.5.6 中，当它消失时，像素问题略有差异。我知道这很挑剔，但我希望它消失并且最终用户不知道其中的区别。
此处提供测试:https://www.ikatanspa.com/book-online/?test
这里也是 jQuery 函数
var highlightFormSuccess = function() {
var fadeTo = 0.6;
var $info = $('p.information');
if ($info.length) {
// make overlay
var $overlay = $('<div />')
.css({
display: 'none',
width: '100%',
height: $(document).height(),
position: 'absolute',
top: 0,
left: 0,
zIndex: 32767,
opacity: 0
})
.attr({
id: 'overlay'
})
.appendTo('body');
// pull out success block and position above overlay
var left = $info.position().left,
top = $info.position().top,
fontSize = $info.css('font-size'),
width = $info.width(),
color = $info.css('color'),
lineHeight = $info.css('line-height');
var $newInfo = $info.clone()
.css({
position: 'absolute',
top: top,
left: left,
'font-size': fontSize,
'line-height': lineHeight,
width: width,
color: color,
zIndex: 32767
})
.appendTo('body');
$overlay
.show()
.fadeTo(1000, fadeTo);
// wait then fade back out
setTimeout(function() {
$($overlay, $newInfo).fadeOut(1000, function() {
$newInfo.fadeOut(250, function() { $(this).remove(); } );
});
}, 2500);
};
};
最佳答案
也许你可以让事情变得更容易一些。我只是通过将段落规则设置为以下内容来复制所需的效果:
p.highlight {
position:relative;
background-color:#ffffff;
z-index:10;
}
我的叠加层:
div.overlay {
position:fixed;
background-color:#000000;
z-index:5; // lower than my paragraph, higher than all else
top:0; left:0; width:100%; height:100%;
}
--
<body>
<div class="overlay"></div>
<p>I'm a paragraph.</p>
<p class="highlight">I too am a paragraph.</p>
</body>
关于javascript - 像素和浏览器与我的 jQuery 效果有关的小问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2010247/