Question

在我的网站上，我有一些图像和iframe，我在fancybox中显示它们。

一切正常，但现在网站的要求就是拥有像今日网站中的覆盖屏幕一样的全屏。

http://www.usatoday.com/tech/

注意：点击任何文章时都会显示叠加。

单击时所需的效果将进行整页覆盖或弹出。所以我需要很好的例子才能使它变得相同。

谢谢

Answer 1

以下是叠加的示例， FIDDLE

(function($) {
  $('article').on('click', function() {
    if($('.overlay').length < 1) {
       $('body').append('<span class="overlay"></span>');
    }
  });

  $(document).on('click','.overlay', function() {
    $('.overlay').remove();   
  });
})(jQuery);

还包括用于打开/关闭fancybox的事件中的按钮。

.overlay {
  background: rgba(50,50,50,0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Answer 2

如果你想从内页调整iFrame的大小，你必须编写自己的逻辑。

首先，在主页面中创建一个功能，以调整iFrame的宽度和高度。（即带有iFrame的页面）。

e.g。

function resetFrameSize(set_height, set_width){
    $("#frame_id_here").css('width',set_width);
    $("#frame_id_here").css('height',set_height);        
}

比内页。您可以在任何页面加载函数中调用此函数。

window.parent.resetFrameSize(new_height_value,new_width_value);

我希望这会有所帮助。

Answer 3

我知道这是一个非常古老的答案，但有一个jquery插件完全相同。该插件可以找到here

现在进入使用部分，它非常容易使用。

您必须确保预先加载了jquery，然后加载它：

<script type="javascript" src="jquery.js"></script>
<script type="javascript" src="jquery.blockUI.js"></script>
....
....
<script>
   $(document).ready(function(){
     $("#<BUTTON_ID>").click(function(){
        $.blockUI();

        setTimeout(function(){
           $.unblockUI(); 
        }, 2000);
     });
   });
</script>

仅供参考：代码非常基本。

希望这有帮助。

全屏覆盖或弹出窗口

3 个答案: