Question

我该怎么做？我出现在右下方。我使用的是Lightbox v2.7.1。

Answer 1

您需要将数据容器移动到外部容器上方。用以下代码替换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'));

Answer 2

v2.8.1的替换代码。这会将关闭按钮和标题移到顶部。

<html>
    <head>
    </head>
    <body>
        <div id="site_banner">
            <img>
        </div>
        <div id="site_content">
            <div id="home_menu"></div>
            <div id="home_content"></div>
        </div>
    </body>
</html>

Answer 3

这是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'));

Answer 4

根据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%');

希望它可以帮助别人。

Answer 5

我在这里编辑了代码（移动关闭块到其他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

Answer 6

最简单，最好的方法，就是一些CSS规则，并且不更改原始库（这是维护问题的最佳选择），看起来像这样：

我们应该利用flexbox来发挥我们的优势吗？是的，放手！


       TYPE Jan Feb 
2019 -  A    1   2
        B    4  4.3

将灯箱关闭按钮放在右上方区域

6 个答案: