-
CollageofPhysiciansandsurgeonAsked on June 10, 2021 at 3:29 PM
-
Jed_CReplied on June 10, 2021 at 8:56 PM
You can add the code into the paragraph field.
<p><a class="button" href="#open" rel="nofollow">Open Pop-Up</a></p>
<div id="open" class="modalBox">
<div><a class="close" title="Close" href="#close" rel="nofollow">X</a>
<h2>Hey there!</h2>
<p>Here's a pop-up modal.</p>
<p>You can customize this with your own message.</p>
</div>
</div>
Then add the CSS below into the CSS style tab.
/*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: 400px;
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: black;
border: none;
color: white;
padding: 2px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
Let us know if you have any questions or if you need further assistance.