0

Here is my link the fancy-box working perfectly all right in all the browser in laptop and desktop but when you open this in mobile device specially mobile device like I-PAD the overlay hide the entire inner html content. your answer will be really appreciate.

For checking fancy-box click on the top menu there is login and signup icon and you can click on the footer email alert button.

Apoorv Awasthi
  • 1,397
  • 1
  • 12
  • 20
Vishal Gupta
  • 11
  • 1
  • 4

1 Answers1

0

From a quick look at the link it appears to be caused by this line of css:

.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 999999999999;
    background: url("http://design.mobulous.com/Watch/css/../images/fancybox_overlay.png");
}

try changing the z-index to something lower, like:

.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 99999;
    background: url("http://design.mobulous.com/Watch/css/../images/fancybox_overlay.png");
}

Additionally you will need to change the z-index on your pollSlider element to something lower too, like 999, if you wish to keep the fancybox overlay on top of your other content. i.e.

.pollSlider {
    position: fixed;
    height: 100%;
    width: 310px;
    right: 0px;
    margin-right: -310px;
    z-index: 999;
    background: #e6e6e5;
}
jwestbrook
  • 71
  • 6
  • I knew this but the thing is as this watch website have lot of plugins and divs in other pages in which some div has z-index higher but when I put higher z-index than the z-index infancyboz pagewrap, overlay hides the pagewrap in mobile devices can you do something by higher z-index – Vishal Gupta May 16 '14 at 05:29
  • Right but it appears browsers have limits - http://stackoverflow.com/questions/491052/mininum-and-maximum-value-of-z-index Also, from debugging with web inspector, it seems in safari on an ipad the fancybox 'content' isn't inside the 'overlay' div. So as the 'overlay' is now defined after the 'content' in the html and they both have the same z-index value it will sit on top. – jwestbrook May 17 '14 at 09:01