-
mbshomeandschoolAsked 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?
-
Nik_CReplied on July 20, 2017 at 2: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" 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!
-
mbshomeandschoolReplied on July 20, 2017 at 3:44 PMAlmost 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
... -
Nik_CReplied on July 20, 2017 at 3: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" 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
-
mbshomeandschoolReplied on July 24, 2017 at 6:35 PM
Almost there. but it disappears as soon as I click on it, not staying up long enough to read the pop up.
-
Elton Support Team LeadReplied 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 target="_blank" attribute that was included in the code. Sorry about that.