灯箱图像 X 关闭按钮对齐图像右上角答案

【问题标题】：LIghtbox image X Closed button align Top right on the image灯箱图像 X 关闭按钮对齐图像右上角
【发布时间】：2019-04-23 11:27:08
【问题描述】：

我需要对齐图片右上角的关闭按钮。我试图给出这个位置，但它没有使用 css。

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

为了实际效果，我附上了图片。

【问题讨论】：

标签： lightbox2

【解决方案1】：

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

这样我就解决了

【讨论】：

我正在使用 lightbox-plus-jquery.js 请用 jsfiddle 解释您的答案以解决上述问题。提前致谢。

【解决方案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。

【讨论】：

【解决方案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-data .lb-close 更改为 .lb-outerContainer .lb-close 最后添加样式：

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

【讨论】：

【解决方案4】：

Lokesh Dhakar 的解决方案不太正确，应将带有 lb-close 类的标签放在 lb-nav 类的末尾，然后按钮将正常工作并显示。也不要忘记将 .lb-nav 标签添加到 .lb-close 中，这样会是这样的：.lb-nav a.lb-close {...}

【讨论】：

我正在使用 lightbox-plus-jquery.js 请用 jsfiddle 解释您的答案以解决上述问题。提前致谢。