Mic*_*Kay 5 jquery modal-dialog lightbox featherlight.js
我正在使用featherlight.js的1.3.3版本,而且我仍然在大图像上进行垂直滚动.无论出于何种原因,事情都没有很好地调整大小.
要重现,只需在其中抛出一个非常大的图像链接并运行featherlight - 垂直滚动.适用于Mac的最新版Chrome,Safari和Firefox.
我注意到使用WP Featherlight插件时不会发生这种情况,但是看起来这个插件使用的是版本1.2.3的修改版本,其中CSS(可能还有JS)与Github上的内容不匹配...
例如,这就是插件CSS中的内容:
.featherlight .featherlight-content {
background: #fff;
border: 0;
cursor: auto;
display: inline-block;
max-height: 95%;
max-width: 90%;
min-width: inherit;
overflow: auto;
padding: 0;
position: relative;
text-align: left;
vertical-align: middle;
white-space: normal;
}
这就是Github回购中的内容:
.featherlight .featherlight-content {
/* make content container for positioned elements (close button) */
position: relative;
/* position: centering vertical and horizontal */
text-align: left;
vertical-align: middle;
display: inline-block;
/* dimensions: cut off images */
overflow: auto;
padding: 25px 25px 0;
border-bottom: 25px solid transparent;
/* dimensions: handling small or empty content */
min-width: 30%;
/* dimensions: handling large content */
margin-left: 5%;
margin-right: 5%;
max-height: 95%;
/* styling */
background: #fff;
cursor: auto;
/* reset white-space wrapping */
white-space: normal;
}
除此之外,repo代码添加了一个透明的边框底部,可能会让事情变得有点时髦...
无论如何,我已经看到各种线程提出垂直滚动的问题 - 你有一个有效的解决方案吗？版本1.3.3似乎仍然有这个问题,我不确定我是否只是遗漏了一些东西.
好的,我们走了.实际上看起来有两个问题,都可能与box-sizing所有诚实相关但不完全确定...
问题1:Lightbox填充整个垂直空间,没有填充
演示:jsfiddle.net/aoejbz8s/10/
如果您查看小提琴,或尝试在WP的任何基础20__主题上使用featherlight,您将看到此问题.当box-sizing: border-box没有明确地为.featherlight容器及其内容设置时,似乎会发生这种情况.您的演示页面(http://noelboss.github.io/featherlight/)上不会出现此问题,因为您包含了引导程序,其中包括以下CSS:
*, *:before, *:after {
box-sizing: border-box;
}
然而,并非所有主题都包括这一点,并且似乎通过CSS明确地添加这个是一个好主意.
也就是说,当我刚刚设置应用上面的CSS而没有别的东西时,其他东西变得不可思议...
问题2:大图像会导致滚动
演示:jsfiddle.net/aoejbz8s/9/
因此,当我包含bootstrap CSS时,灯箱现在看起来是正确的大小(使用垂直填充),但是大图像会导致整个内容区域滚动.无论出于何种原因,这不会发生在您的演示页面上,而是在小提琴中.
此外,如果我在您的演示页面上触发灯箱,并使用相同的JS/CSS启动我自己的站点并触发相同图像的灯箱,两者都具有完全相同的视口大小,则图像的调整大小会有所不同!
以下是此问题的截屏视频:http://g.recordit.co/k9B5B0IInH.gif(过早切断,但仍然会解决问题)
所以我认为那里必定有一些CSS风格导致了这个问题,但对于我的生活,我似乎无法找到它的本质.我想知道你的演示页面中是否有一个影响这个问题的额外CSS规则,或者我测试过的所有其他主题都有CSS破坏了东西.
其他想法/问题
width()/height() vs 'outerWidth()/outerHeight()在JS 中使用的问题因此,在深入研究WP Featherlight插件之后,我发现了一些似乎基本上完全解决了这个问题的样式 - 不知道为什么它们不包含在默认的CSS中.他们是:
.featherlight .featherlight-content {
border: 0;
padding: 0;
}
.featherlight .featherlight-image {
border: 20px solid #fff;
max-width: 100%;
}
@media only screen and (max-width: 1024px) {
.featherlight .featherlight-image {
border: 10px solid #fff;
}
}
知道为什么这些不包含在默认的CSS中吗？还有什么我想念的吗？感觉这太明显了,不能正确修复:)
小智 1
我发现这解决了我的问题：
.featherlight .featherlight-image {
height: 60vh !important;
width: auto !important;
}