Lightbox increase the z-index

  • Profile Image
    omnigon
    Asked on May 01, 2012 at 02:55 PM

    I have a lightbox and the navigation is seeing through.  I see that the z-index for the part that is seeing throught is: 10001

     

    I need to increase this so the navigation does not show through.  I would change the z-index of the Navigation but I do not have access to that file.  It is a rather large site and I can't change the css for the navigation.

     

    Is there a way of doing this, that doesn't involve me taking all the source code and css files out?

  • Profile Image
    Mike_T
    Answered on May 01, 2012 at 04:29 PM

    Thank you for contacting us.

    Could you please provide us with the URL where we can see that lightbox? Then, we will try to check this further.

    We are looking forward to hearing from you.

  • Profile Image
    omnigon
    Answered on May 01, 2012 at 04:31 PM

    http://rangers.nhl.com/club/page.htm?id=65420

  • Profile Image
    Mike_T
    Answered on May 01, 2012 at 05:43 PM

    Our lightbox is supposed to have high z-index. I am sorry, but I have not found your lightbox on http://rangers.nhl.com/club/page.htm?id=65420 page. Where we can reproduce the problem?

    Thank you for cooperation.

  • Profile Image
    omnigon
    Answered on May 01, 2012 at 05:49 PM

    Here is a screen shot on the url i provided: 

    http://awesomescreenshot.com/0554ovs08

     

    YOu see the navigation showing through?  Due to it having a higher z-index than JotForm's Lightbox.

     

    You did not see the lightbox appear when you went to that link?

  • Profile Image
    Mike_T
    Answered on May 01, 2012 at 06:52 PM

    I am sorry, I was not able to see the lightbox due to AdBlock addon in my browser. Now I can see the problem.

    It seems that I can see different z-index for the form div using our defaul lightbox code on my test page. What code do you use to show your lightbox?

  • Profile Image
    omnigon
    Answered on May 01, 2012 at 06:56 PM

    Here is the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

    <head>

        <title>Contact Us</title>

    </head>

    <body onload="document.getElementById('lightbox-21146026869961').click()">

    <script src="//jotformpro.com/min/g=feedback" type="text/javascript">

    new JotformFeedback({

    formId:'21146026869961',

    base:'http://jotformpro.com/',

    windowTitle:'Rangers Popup',

    background:'#FFA500',

    fontColor:'#FFFFFF',

    type:1,

    height:540,

    width:700

    });

    </script>

    <input id="lightbox-21146026869961" style="display:none" type="submit" value="lightbox" >

    </body>

    </html>

  • Profile Image
    Mike_T
    Answered on May 01, 2012 at 07:10 PM

    Our Developers have recently implemented new version of lightbox script, and it is available from http://jotformpro.com/min/g=feedback2

    I hope that the following change will solve your problem:

    from

    < script src="//jotformpro.com/min/g=feedback" type="text/javascript" >

    to

    < script src="//jotformpro.com/min/g=feedback2" type="text/javascript" >

    Alternatively, you can try the code from our embedding wizard:

    Please give it a try, and let us know if you need any further assistance.