Иногда есть необходимость выделить конкретные участки сайта, для привлечения к ним пользовательского внимания. Для этого нам на помощь придут подсвечивающиеся блоки. При активации такой подсветки, область вокруг блоков затемняется и становится недоступной до момента нажатия отмены, а пользователя переместит к выделенной области(скролл)
Для наглядности, мы добавили несколько блоков ниже. По нажатию на кнопки, они будут выделяться
×Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, commodi dolore dolorem dolores ea eligendi esse excepturi facere fugiat, in iusto nisi nostrum omnis optio perferendis sapiente sed soluta, vel.
<div class="grid columns-6 rows-6 p-20 text-center">
<div id="poplight-1" data-poplight-message="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, dignissimos?" class="bg-gray-200 column-1 p-4">Блок #1</div>
<div id="poplight-2" data-poplight-message="#poplight-2-message" class="bg-gray-300 column-3 row-1-3 p-4">Блок #2</div>
<div id="poplight-3" data-poplight-message="#poplight-3-message" class="bg-gray-400 column-5-6 p-4">Блок #3</div>
<div id="poplight-4" data-poplight-message="#poplight-4-message" class="bg-gray column-2 row-5-6 p-4">Блок #4</div>
</div>
<div id="poplight-2-message" class="poplight-message"><a href="#" class="poplight-message-close">×</a>Lorem ipsum dolor sit amet.</div>
<div id="poplight-3-message" class="poplight-message"><a href="#" class="poplight-message-close">×</a>Lorem ipsum dolor sit amet, <b>consectetur</b> adipisicing elit. Beatae, commodi dolore dolorem dolores ea eligendi esse <u>excepturi facere fugiat</u>, in iusto nisi nostrum omnis optio perferendis sapiente sed soluta, vel.</div>
<div id="poplight-4-message" class="poplight-message">
<a href="#" class="poplight-message-close">×</a>
Block with HTML<hr>Poplight is <b><u>open!</u></b>
</div>
<div class="pt-20 text-center">
<button class="btn" data-poplight="#poplight-1">Блок #1</button>
<button class="btn" data-poplight="#poplight-2">Блок #2</button>
<button class="btn" data-poplight="#poplight-3">Блок #3</button>
<button class="btn" data-poplight="#poplight-4">Блок #4</button>
<button class="btn" data-poplight="#poplight-3,#poplight-4">Блок #3 и Блок #4</button>
</div>
Для подсвечивания нужного блока, добавьте ему триггер, например, атрибут id и выводимы в подсказке текст в атрибут data-poplight-message. В качестве элемента, который будет вызывать подсветку, используйте атрибут data-poplight, где в качестве значения будет триггер(в примере ранее - это id). Если указать в атрибуте data-poplight-message другой элемент (id,класс,атрибут), то будет вызван другой блок, который вы можете добавить самостоятельно с классом .poplight-message
Влиять на поведение подсветки можно и с помощью javascript. Для этого в компоненте подготовлен объект pipui.poplight