user3569680 user3569680 - 1 year ago 105
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.

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.


Answer Source

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() {

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%;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download