Подсветить элемент на странице

Иногда необходимо подсветить определённый элемент на странице, div или поле для ввода текста. В этом случае можно воспользоваться моей функцией. Она плавно затемняет весь экран, кроме определённого элемента. Также можно передать в функцию цвет заднего фона этого элемента.

Функция проходит по всем родителям элемента, и устанавливает им z-index равным auto. Если этого не делать, блок не будет подсвечен.

Код функции:

$.fn.extend({
highlightElement: function(object)
{
var target = this;

if(target.css("position") == "static")
{
target.css("position", "relative");
}
target.css("z-index", "100001");

var parent = target.parent();
while(!$(parent).is("body"))
{
if($(parent).css("z-index") != "auto")
{
$(parent).css("z-index", "auto");
}
parent = $(parent).parent();
}

if(object && object.backgroundColor)
{
var defaultColor = target.css("background-color");
target.css("background-color", object.backgroundColor);
}

if(!$("#overlay").length)
{
$("body").prepend("<div id = 'overlay'>");

$("#overlay").css(
{
"position" : "fixed",
"height" : "100%",
"width" : "100%",
"background" : "black",
"z-index" : "100000",
"display" : "none",
"opacity" : "0.8"
});
}

$("#overlay").fadeIn(500);
$("#overlay").click(function()
{
if(object && object.backgroundColor)
{
target.css("background-color", defaultColor);
}
$("#overlay").fadeOut(500);
});
}
});

Для того чтобы вызвать данную функцию, необходимо написать:

$(".show_overlay").click(function() {
$("#vk_community_messages").highlightElement({backgroundColor: "green"});
});

Где:

".show_overlay" - элемент, при клика на который выполнится функция.

"#vk_community_messages" - элемент который будет подсвечен.

backgroundColor: "green" - цвет заднего фона подсвечиваемого элемента.

В итоге должно получится:

comments powered by Disqus


  • Метод `highlightElement` слишком сложный, у него сразу 2 ответственности, он и навешивает событие клика, и подсвечивает элемент, это ограничивает возможный набор ситуаций для применения. К тому же метод имеет один жестко определенный параметр, что может препятствовать к дальнейшему его расширению, например, если понадобится добавить функцию обратного вызово или еще что-нибудь.

    Правильнее и дальновиднее было бы сделать метод, который бы занимался только подстветкой элемента, оставив выбор события пользователям метода, и не ограничиваться при этом доп. параметром backgroundColor, а разрешить передавать массив с множеством настроек.

    Например, можно было сделать вот так:

    $('#vk_community_messages').higlightElement({ backgroundColor: 'green' });

    С событием вот так:

    $('.show_overlay').on('click', function() {
    $('#vk_community_messages').higlightElement({ backgroundColor: 'green' });
    });

    • Спасибо! Внёс изменения.

Следующий "Контроль версий коробочных модулей HostCMS" К списку Предыдущий "Новые услуги: консультирование и экспертная оценка"