Изображение лайтбокса X Закрытая кнопка выравнивается справа вверху на изображении

#lightbox2

Вопрос:

Мне нужно выровнять кнопку закрытия в правом верхнем углу изображения. Я попытался указать позицию, но она не используется с помощью css.

 .lb-closeContainer {
   position: absolute;
   top: -10px;
   right:40px;
 }

Для фактического результата я прикрепил к нему изображение.

Ответ №1:

 .lb-data .lb-close {
display:block;
position:absolute;
right:50px;
top:5px;
/*float: right;*/
}

вот так я решил эту проблему

Ответ №2:

Библиотека не предлагает API для внесения этого изменения, поэтому вам придется взломать / обезьянить его.

Изменение html-кода. Идеальным способом сделать это было бы обновить разметку, сгенерированную lightbox.js и переместите <a> тег с lb-close классом внутри <div class="lb-container"> , как показано ниже. Чтобы сделать это, вы могли бы изменить lightbox.js . В строке 102 вы можете увидеть сгенерированную разметку:https://github.com/lokesh/lightbox2/blob/dev/dist/js/lightbox.js#L102

Позиционирование с помощью CSS. Затем вам нужно будет применить некоторый CSS для позиционирования кнопки «X»:

 position: absolute;
right: 16px;
top: 16px;

О, и обратите внимание, что с тех пор, как был перемещен тег привязки с lb-close , был обновлен CSS-селектор, который ранее стилизовал его. Теперь это просто .lb-close .

Ответ №3:

В этом плагине js вам нужно изменить файлы lightbox.js и файл lightbox.css (или respectives .min)

Сначала: в lightbox.js найти:

 <div class="lb-closeContainer"><a class="lb-close"></a></div>

а затем вырезать и вставить внутрь

 <div class="lb-outerContainer">

Теперь в CSS вы настраиваете классы. Измените все .lb-data .lb-close by .lb-outerContainer .lb-close и, наконец, добавьте стиль:

 .lb-outerContainer .lb-close {
  position:absolute;
  right: -30px;
  top: -30px;
}

Ответ №4:

Решение от Локеша Дакара не совсем правильное, тег с классом lb-close должен быть размещен в конце класса lb-nav, тогда кнопка будет работать правильно и отображаться. Также не забудьте добавить тег .lb-nav к .lb-close, чтобы это было так: .lb-nav a.lb-close {…}