时间戳

首页 > 解决方案 > 灯箱标题区域太窄

javascript - 灯箱标题区域太窄

问题描述

我按照其他人的一些建议重新排列 JS 代码的顺序，以使标题和 lb-close 浮动到顶部。

我还为响应更快的图像流添加了一个断点（尤其是我的图像在打开时填满了页面）

对我来说不幸的是，一旦我添加了断点，它就会破坏整个代码。当我检查元素时，似乎 div.lb-details 区域现在是 0x51。

此处的图片供参考：标题的宽度为 0 下面是我创建的代码，用于使用断点使弹出窗口响应：

@media only screen and (min-width: 1024px) and (max-width: 1600px)
.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

这是 .lb-details 和 .lb-caption 区域，因此您可以看到它没有被更改。

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #4ae;

在 JS 文件中，我只更改了原型函数行：

原来在哪里：

var self = this;
    $('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><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 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>').appendTo($('body'));

变成：

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

什么可能导致此问题？

标签： javascriptcsscaptionlightbox2

解决方案

推荐阅读