logo标签列表

将灯箱关闭按钮放置在右上角区域。

csslightbox2
6
我该怎么做呢？我的出现在右下角。我使用的是Lightbox v2.7.1版本。
2
请添加 JFiddle - 如果您不添加合法的代码，我们无法帮助您。 - Riskbreaker
7个回答
6

针对v2.8.1版本的替换代码。 这将把关闭按钮和标题都移动到顶部。

Lightbox.prototype.build = function() {
var self = this;
$('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div></div>').appendTo($('body'));
6

您需要将数据容器移动到外部容器之上。请使用以下代码替换lightbox.js文件第59行开始的代码：

Lightbox.prototype.build = function() {
  var self = this;
  $("<div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div><div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div>").appendTo($('body'));
2
这是适用于v2.7.1的可用代码。请将lightbox.js文件第59行开始的代码替换为以下内容：
Lightbox.prototype.build = function() {
var self = this;
$("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div></div>").appendTo($('body'));
2

最简单和最好的方法是只使用一些CSS规则，而不改变原始库（这是维护问题的最佳选择），可能看起来像这样：

我们可以利用flexbox吗？ 是的，让我们开始吧！

（注意：这是SCSS代码）

#lightbox {
    display: flex;
    flex-direction: column;

    .lb-dataContainer {
        order: 0;
        margin-bottom: 10px;

        //Want to hide the text? no problem
        .lb-details {
            opacity: 0;
        }

        // Want to change the icon? no problem too.
        .lb-close {
            background: url(../images/ico/close.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: right;
        }
    }

    .lb-outerContainer{
        order: 1;
    }
}
这在2021年是有效的，我猜你应该指明它不是CSS，而是需要编译 :) - Paranoid Android
是的！对我来说这很常见，我忘了解释这是 SCSS 代码！谢谢。 - Vitor Régis
1

根据APAD1和user1999659的答案，我做了以下修改，使关闭按钮位于右上角，但标题仍在图像下方。

这是适用于v2.7.1的工作代码。请使用以下代码替换lightbox.js文件第59行开始的代码：

Lightbox.prototype.build = function() {
  var self = this;
  $("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span></div></div></div></div>").appendTo($('body'));      
  $('.lb-data .lb-details').css('width', '100%');

希望它能帮助其他人。
0

我像这样编辑了代码（将关闭块移动到其他 Div 中）：

Lightbox.prototype.build = function() {
var self = this;
$('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-closeContainer"><a class="lb-close"></a></div><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div></div></div></div>').appendTo($('body'));

并添加了以下 CSS

.lb-closeContainer {
    position: absolute;
    top: -2px;
    right: -28px;
}

这个 CSS 有一些修改

.lb-closeContainer .lb-close {
  display: block;
  float: right;
  width: 24px;
  height: 24px;
  background: url(../images/close.png) top right no-repeat;
  background-size: contain;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-closeContainer .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

结果: http://i.stack.imgur.com/AuYQ9.png

0
我从Vitor Régis那里获取了scss代码，并将其转换为css，以便那些没有编译器的人使用。这绝对是最好的选择，因为它根本不需要修改源代码。
#lightbox {
    display: flex;
    flex-direction: column;
}

#lightbox .lb-dataContainer {
    order: 0;
    margin-bottom: 10px;
}

#lightbox .lb-dataContainer .lb-details {
    opacity: 0;
}

#lightbox .lb-dataContainer .lb-close {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}

#lightbox .lb-outerContainer{
    order: 1;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接