灯箱图像X闭合按钮将图像右上角对齐

Question

我需要对齐图像右上角的关闭按钮。我试图给出这个位置，但是它不适合CSS。

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

为得到实际结果，我将图像附加了它。

Answer 1

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

像我这样解决

Answer 2

该库没有提供进行此更改的API，因此您将不得不对其进行hack / monkeypatch。

修改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。

Answer 3

在此插件js中，您需要更改文件lightbox.js和lightbox.css（或相应的.min）

首先： 在lightbox.js中找到：

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

然后在内部切入

<div class="lb-outerContainer">

现在，在CSS中，您可以调整类。通过.lb-outerContainer .lb-close更改所有.lb-data .lb-close，最后添加样式：

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

Answer 4

来自Lokesh Dhakar的解决方案不太正确，应将具有lb-close类的标签放置在lb-nav类的末尾，然后该按钮将正常工作并显示。 同样不要忘记在.lb-close上添加.lb-nav标签，这样就可以了：.lb-nav a.lb-close {...}