Can I Replace The 'X' Which Closes A Lightbox With Another Image?

  • Profile Image
    mcarikn
    Asked on November 09, 2014 at 01:19 PM
    Now, I noticed that on smaller devices (iPad, smartphone) its a little hard to click on the little X on the lightbox window to close it.
    Is it possible to add a button (or an image) on the lightbox, that will close the window when clicked?
  • Profile Image
    abajan
    Answered on November 09, 2014 at 03:41 PM

    Hi mcarikn,

    Perhaps it would be better to use the version of lightbox that closes when anywhere outside of its perimeter is clicked. To do that, in the lightbox code just include the number "2" after the word feedback as follows:

    Change

    http://www.jotform.com/min/g=feedback

    to

    http://www.jotform.com/min/g=feedback2

    Do let us know if this would be an acceptable workaround.


    Thanks

  • Profile Image
    mcarikn
    Answered on November 09, 2014 at 04:13 PM

    Hi abajan,
    Thanks. This workaround is nice, but the user wouldn't know that clicking outside the lightbox will close it. It would really be great if I can put a button or image on the lightbox, that will close the window when clicked.
    Thanks for your help!

  • Profile Image
    ashwin_d
    Answered on November 10, 2014 at 03:17 AM

    Hello mcarikn,

    Please add the following custom css code in your webpage where you have embedded your form and see if that gives you the desired result:

    <style type="text/css">

    div div img {

    height: 120% !important;

    top: -30px !important;

    right: -42px !important;

    }

    </style>

    Thank you!

  • Profile Image
    mcarikn
    Answered on November 10, 2014 at 04:26 AM

    Thank you ashwin_d,

    This is better (the X is bigger) but:
    a. it effects other elements on the page as well (makes them bigger)
    b. I would really prefer to have a button (or image) on the lightbox that will close the window when clicked.

    Appreciate your help!

  • Profile Image
    abajan
    Answered on November 10, 2014 at 05:46 AM

    Hi again,

    Please try the following code instead and let us know if the result is acceptable:

    <style type="text/css">
    .jt-feedback div img {
    display: block;
    box-sizing: border-box;
    background: url(https://shots.jotform.com/wayne/images/close-button-grey.png) no-repeat;
    width: 94px;
    height: 39px;
    padding-left: 94px;
    z-index: 100;
    }
    </style>

  • Profile Image
    mcarikn
    Answered on November 10, 2014 at 02:12 PM

    Hi abajan,
    Yes, this works nicely.

    Is there a way to load the lightbox faster? as soon as the user enters the page?
    Right now it looks like the page is loading first and then the lightbox.

    Thanks!
  • Profile Image
    KadeJM
    Answered on November 10, 2014 at 03:07 PM

    I've moved your secondary follow-up question to a new thread where we will handle it there to help you with that.