modal pop up no longer works in new form design

hi, my form had a modal pop up box. however, after updating to the new form the modal pop up no longer works... is there a way to fix this

Are you referring to this form:

https://www.jotform.com/form/200786876603868

Please be noted that once you switch the theme then the formatting, as well as the CSS, would be lost. You need to take a backup of the CSS you have in the Form builder.

Do you have any backup of the CSS or the form which has the previous template?

Looking forward to your response.

Thanks.

yes the form im refering to is https://www.jotform.com/form/200786876603868. I have the CSS codes however im not fameliar with how to use them... as i simply cut and paste following a guide from the JOT form Forum... i tried retracing my steps but it does not work the same...

/*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;

}

Since your form has different CSS class/IDs, kindly use this one instead:

/*Main Box Content*/

.infoBox {

 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*/

.infoBox:target {

 opacity: 1;

 pointer-events: auto;

}

/*Positioning of the child box*/

.infoBox>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*/

.close2:hover {

 background: black;

 color: white;

}

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

.open2 {

 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: How-to-Inject-Custom-CSS-Codes