Question

我有一个视频出现在你的电子管灯箱中，一个自定义的视频而不是一个插件。

在移动设备上显示纵向时，视频会覆盖整页宽度，看起来不错，并在顶部和底部留出一些空间来点击。

问题是，当我进入横向视频时，视频会填满整个屏幕，您无法返回页面。我最初的反应是按下手机后退键，但我不知道如何解决这个问题，只需删除我的灯箱。在JS中有没有办法让手机后退按钮onclick？

全屏显示的原因是因为我保持宽高比

        var width: number = $('.youtube-video-lightbox').outerWidth();
        var height: number = (width / 16) * 9;
        $('.youtube-video-lightbox').height(height);

Answer 1

您可以尝试使用以下代码：

您需要收听导航事件和state.direction。

 $(window).on("navigate", function (event, data) {
  var direction = data.state.direction;
  if (direction == 'back') {
    // close the light box here
  }
  if (direction == 'forward') {
    // do something else
  }
});

this link

中的更多详情

在我的手机上测试了上面的代码，它运行正常。关闭灯箱后，您可能需要停止程序流程，以便停止后退按钮的默认导航。

Answer 2

编织：http://kodeweave.sourceforge.net/editor/#e110ed7e89c3a38335739656a02f9850

您是否考虑过尝试Pure CSS Based Lightbox？

$('[data-target]').on('click', function() {
  $('.page').attr('src', $(this).attr('data-target'));
});

$('#call').on('change', function() {
  (this.checked) ? "" : $('.page').attr('src', '');
});

input[id=call] {
  display: none;
}

a {
  margin: 1em;
}

.bg,
.content {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all ease-in 150ms;
}

.bg {
  background: #515151;
  background: rgba(0, 0, 0, 0.58);
}

.content {
  margin: 2.6352em;
  padding: 1em;
  background: #fff;
}

input[id=call]:checked ~ .bg,
input[id=call]:checked ~ .content {
  visibility: visible;
  opacity: 1;
}

.block {
  display: block;
}

.pointer {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="call" type="checkbox" />
<p>
  <a href="javascript:void(0)" data-target="http://bing.com/" class="pointer block">
    <label for="call" class="pointer">Bing</label>
  </a>
  <a href="javascript:void(0)" data-target="http://duckduckgo.com/" class="pointer block">
    <label for="call" class="pointer">DuckDuckGo</label>
  </a>
</p>
<label for="call" class="bg pointer"></label>
<div class="content">
  <iframe width="100%" height="100%" frameborder="0" class="page"></iframe>
</div>

iframe | youtube iframe上的移动后退按钮

2 个答案: