Featherlight 灯箱目标始终可见

Question

我正在使用 Featherlight.js 尝试获得灯箱效果。灯箱应在单击图像时打开，但灯箱的目标内容是视频而不是单击的图像。（基本上，您单击一个占位符图像并弹出一个 youtube 视频。）但是，在单击任何内容之前，youtube 视频在我的页面上显示为在图像下方可见。除了在灯箱的上下文中，如何使视频不可见？

@media all {
 .featherlight {
  display: none;

  /* dimensions: spanning the background from edge to edge */
  position:fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2147483647; /* z-index needs to be >= elements on the site. */

  /* position: centering content */
  text-align: center;

  /* insures that the ::before pseudo element doesn't force wrap with fixed width content; */
  white-space: nowrap;

  /* styling */
  cursor: pointer;
  background: #333;
  /* IE8 "hack" for nested featherlights */
  background: rgba(0, 0, 0, 0);
 }

 /* support for nested featherlights. Does not work in IE8 (use JS to fix) */
 .featherlight:last-of-type {
  background: rgba(0, 0, 0, 0.8);
 }

 .featherlight:before {
  /* position: trick to center content vertically */
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
 }

 .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;
 }

 /* contains the content */
 .featherlight .featherlight-inner {
  /* make sure its visible */
  display: block;
 }

 .featherlight .featherlight-close-icon {
  /* position: centering vertical and horizontal */
  position: absolute;
  z-index: 9999;
  top: 0;
  right: 0;

  /* dimensions: 25px x 25px */
  line-height: 25px;
  width: 25px;

  /* styling */
  cursor: pointer;
  text-align: center;
  font-family: Arial, sans-serif;
  background: #fff; /* Set the background in case it overlaps the content */
  background: rgba(255, 255, 255, 0.3);
  color: #000;
 }


 .featherlight .featherlight-image {
  /* styling */
  width: 100%;
 }


 .featherlight-iframe .featherlight-content {
  /* removed the border for image croping since iframe is edge to edge */
  border-bottom: 0;
  padding: 0;
 }

 .featherlight iframe {
  /* styling */
  border: none;
 }
}

/* handling phones and small screens */
@media only screen and (max-width: 1024px) {
 .featherlight .featherlight-content {
  /* dimensions: maximize lightbox with for small screens */
  margin-left: 10px;
  margin-right: 10px;
  max-height: 98%;

  padding: 10px 10px 0;
  border-bottom: 10px solid transparent;
 }
}

<a class="VideoLink" href="#" data-featherlight="#mylightbox">
    <img class="PopoutClickImage" src="Images/Dyson Extracted/V Click Video.png"/>
</a>
<div id="mylightbox">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/IUnEEi4tM0U?list=PL4VODwvGuSpSPwDCceh4sL9qIX-WF3oiD&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

Answer 1

featherlight 文档正在使用 class，其中在其灯箱目标上包含 display:none。所以制作一个 class .hide { display:none } 如果你还没有并将它添加到#mylightbox。

Answer 2

然后你还必须在featherlight.css中用display:block!important标记.featherlight-inner，否则内容仍然会被隐藏。不是最好的插件...

/* contains the content */
.featherlight .featherlight-inner {
    /* make sure its visible */
    display: block !important;
    text-align: center;
}

Answer 3

运行也进入这个问题，我找到的唯一解决方案如下：

#popup_code {
  display:none;
}
.featherlight .featherlight-inner {
  display: block !important;
}

popup_code 是您在灯箱中展示的内容的 ID。 display:none 属性将确保原始内容始终隐藏。在 featherlight 的内部元素上设置 display:block 将确保它在打开后会显示灯箱中内容的副本。

这个解决方案并不理想，因为我必须 'important' 该属性。它虽然有效。希望有人能提出更好的方法。

Featherlight 灯箱目标始终可见

Featherlight Lightbox Target Always Visible

lightbox

featherlight.js