How to make image popup in the form?

  • Profile Image
    mbshomeandschool
    Asked on July 20, 2017 at 11:37 AM

    I'm trying to add a sizing chart to my form, but i want it to be a link that you can click and the picture pops up. Currently its just an image on the page. Is the clickable pop up an option?

  • Profile Image
    Nik_C
    Answered on July 20, 2017 at 02:51 PM

    There might be a way to do that with modal popup, more about that here: https://www.jotform.com/help/417-How-to-Add-a-Pop-Up-Modal-on-your-Form

    Here is my test form, feel free to check it: https://form.jotformpro.com/72005437259960

    I made a button of your image and created a pop-up of it so it works like this:

    1)To make this work, remove the image from the form and add a Text field to its place:

    2) Edit text field and enter the code area:

    3) Copy the below code there:

    <p><strong>Click to view size chart:</strong></p>

    <p><a class="button" target="_blank" href="#open"><img src="https://www.jotform.com/uploads/mbshomeandschool/form_files/Size%20Chart.295.png" width="600px" height="250px" /></a></p>

    <div id="open" class="modalBox">

    <div><a class="close" title="Close" target="_blank" href="#close">X</a>

    <h2>Size chart</h2>

    <img src="https://www.jotform.com/uploads/mbshomeandschool/form_files/Size%20Chart.295.png" width="900px" height="500px" /></div>

    </div>

    4) Go to Custom CSS field and copy the below CSS code:

    /*Main Box Content*/

    .modalBox {

    position: fixed;

    font-family: Arial, Helvetica, sans-serif;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background: rgba(0,0,0,0.8);

    color: black;

    z-index: 99999;

    opacity:0;

      -webkit-transition: opacity 400ms ease-in;

    -moz-transition: opacity 400ms ease-in;

    transition: opacity 400ms ease-in;

    pointer-events: none;

    }

    /*When the href are clicked*/

    .modalBox:target {

    opacity:1;

    pointer-events:auto;

    }

    /*Positioning of the child box*/

    .modalBox > div {

    width: 900px!important;

    height: 600px!important;

    position: relative;

    margin: 10% auto;

    padding: 5px 20px 13px 20px;

    border-radius: 0px;

    background: white;

    }

    /*Positioning and style of the close button*/

    .close {

    background: white;

    color: black;

    line-height: 25px;

    position: absolute;

    right: 1px;

    text-align: center;

    top: 1px;

    width: 35px;

    text-decoration: none;

    font-weight: bold;

    -webkit-border-radius: 12px;

    -moz-border-radius: 12px;

    border-radius: 12px;

    -moz-box-shadow: 1px 1px 3px #000;

    -webkit-box-shadow: 1px 1px 3px #000;

    box-shadow: none;

    border: none;

    }

    /*Style when mouse hovers on the close button*/

    .close:hover { 

      background: black;

      color: white;

    }

    /*Default style of the open pop-up button*/

    .button {

        background-color: white;

        border: none;

        color: white;

        padding: 2px 10px;

        text-align: center;

        text-decoration: none;

        display: inline-block;

        font-size: 16px;

        margin: 4px 2px;

        cursor: pointer;

    }

     

    Please let us know how it worked and if this is what you need.

    Thank you!

  • Profile Image
    mbshomeandschool
    Answered on July 20, 2017 at 03:44 PM
    Almost there.
    The pic gets larger when you click but how do I make it where you can't see the pic unless you click on the words size chart?
    Sent from my iPhone
    ...
  • Profile Image
    Nik_C
    Answered on July 20, 2017 at 03:54 PM

    You meant something like this:

    To make that happen, replace the above code for Text field with the below one:

    <p><a class="button" target="_blank" href="#open">Click here to view size chart!</a></p>

    <div id="open" class="modalBox">

    <div><a class="close" title="Close" target="_blank" href="#close">X</a>

    <h2>Size chart</h2>

    <img src="https://www.jotform.com/uploads/mbshomeandschool/form_files/Size%20Chart.295.png" width="900px" height="500px" /></div>

    </div>

    And here is my updated test form: https://form.jotformpro.com/72005437259960

     

  • Profile Image
    mbshomeandschool
    Answered on July 24, 2017 at 06:35 PM

    Almost there. but it disappears as soon as I click on it, not staying up long enough to read the pop up. 

  • Profile Image
    EltonCris
    Answered on July 24, 2017 at 10:01 PM

    I've fixed it for you. Kindly check your form https://form.jotform.us/71429130684153

    The problem was the attribute that was included in the code. Sorry about that.