Popup information

  • Profile Image
    Asked on June 10, 2021 at 03:29 PM
  • Profile Image
    Answered on June 10, 2021 at 08: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>


    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;
     -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 {

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