How to make image popup in the form?

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?

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" 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" 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!

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
...

You meant something like this:

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

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

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

<div><a class="close" title="Close" 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

 

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

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

The problem was the target="_blank" attribute that was included in the code. Sorry about that.