Чтобы выделить определенный элемент p, я написал несколько JS, чтобы он отображался над затемненным фоном.
Чтобы сделать это, я использовал jQuery для создания наложения, а затем клонировал элемент информации p и абсолютно поместил его поверх наложения.
Поскольку в нем пропущено несколько свойств CSS (не наследуемых из-за новой позиции на странице), я использовал jQuery для их добавления.
Работает почти отлично. В моем Firefox 3.5.6 на Mac OS X, когда он исчезает, наблюдается небольшая разрозненность в размере пикселей. Я знаю, что это придирчиво, но я бы хотел, чтобы оно исчезло, и конечный пользователь не почувствовал разницу.
Тест доступен здесь: 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);
};
};