user3569680 user3569680 - 2 months ago 8
CSS Question

Overlay or popup with full screen

In my website, I have some images and iframe which I am displaying them inside a fancybox.

Everything is working ok, but now the requirement of the website is to have a fullscreen like the overlay screen in usatoday website.

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

Note: When click on any article will shown that overlay.

The desired effect is when clicked will make full page overlay or popup. So I need good example to make it same.

Thanks

Answer

Here's an example for overlay, FIDDLE

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

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

also include buttons in the events for open/close fancybox.


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