CSS code: How to click out a pop-up modal window?

it's rather that I want the modal window to appear automatically as a pop-up that the user can click out of. Is this possible to achieve this with the modal window properties? Is there another way of displaying a pop-up window in the form that I could control with conditional logic?

Hi imccauley,

I understand things much better now. Regarding your question about having a modal window appear automatically as a pop-up that users can click out of, currently, Jotform does not support creating custom popups or modal windows that automatically appear and can be dismissed by clicking outside.

As a workaround, we can inject CSS code to achieve this. Let me walk you through this:

1. First, copy this code:

/* Modal container (hidden by default) */

.modalBox {

  position: fixed;

  top: 0; left: 0; right: 0; bottom: 0;

  background: rgba(0,0,0,0.8);

  z-index: 9999;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.4s ease-in;

}





/* Show modal when targeted */

.modalBox:target {

  opacity: 1;

  pointer-events: auto;

}





/* Modal content box */

.modalBox > div {

  width: 400px;

  margin: 10% auto;

  padding: 20px;

  background: white;

  border-radius: 4px;

  position: relative;

}





/* Close button */

.close {

  position: absolute;

  top: 10px;

  right: 10px;

  background: white;

  color: black;

  text-decoration: none;

  font-weight: bold;

  border: none;

  font-size: 18px;

  cursor: pointer;

}

2. Next, in Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Check out the screencast below for the results:

Give it a try and let us know if you have any other questions.

Sorry, I'm not sure how the injected CSS code makes any difference to my form. I want the window to pop-up automatically when the page loads--not when users click the button. I'd ideally get rid of the button entirely--the only reason I have it on the form is because it was the only method I found that created a pop-up window. Is there a way to accomplish that?

Hi imccauley,

We can show the modal once the form was accessed but the close button will not be functional as it will need Javascript. As a workaround, you can automatically close it after a few seconds. You can use the code below:

/* Modal container */

.modalBox {

  position: fixed;

  top: 0; left: 0; right: 0; bottom: 0;

  background: rgba(0, 0, 0, 0.8);

  z-index: 9999;

  opacity: 0;

  pointer-events: none;

  animation: showModal 0.5s ease-in 0.3s forwards,

             hideModal 0.5s ease-out 5s forwards; /* Auto-close after 5s */

}



/* Show animation */

@keyframes showModal {

  to {

    opacity: 1;

    pointer-events: auto;

  }

}



/* Hide animation */

@keyframes hideModal {

  to {

    opacity: 0;

    pointer-events: none;

  }

}



/* Modal content */

.modalBox > div {

  width: 400px;

  margin: 10% auto;

  padding: 20px;

  background: white;

  border-radius: 4px;

  position: relative;

  pointer-events: auto;

}

Checkout the screencast below to see my results: Another workaround is to dedicate the first page of your form for the instructions and your users can click the Next button to fill out the form like this:

Currently, Jotform doesn't support Javascript customization, however if you will be embedding your form in your website, you can customize it.

Reach out again if there’s anything else we can help you with.

Okay, thanks for the information.

The separate page solution may be the most practical. Is there a way to skip the first page based on the conditions I've created? I.e., if a user returns to the form using the edit link, they wouldn't need to click to the next page?

Hi imccauley,

I understand what you’d like to do, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

Let us know if you have any other questions.

Hi imccauley,

Unfortunately, we can't skip the first page, as the Skip to/Hide a Page condition requires a trigger to work. As a workaround, you can place the instructions at the top of your first page, and we can use a Show/Hide Field condition instead to control the visibility of the relevant fields based on user input.

First, we can use a Single Choice First to act as the Close button:

1. While in Form Builder, click on Add Element on the left side of the page.
2. In the Form Elements menu, under the Basic tab, scroll down the list and choose the Single Choice field.
3. Now, just drag and drop it to your form.
4. Remove the Form Label and customize the options.

Now, let's set up the conditions:

1. In Form Builder, in the orange navigation bar at the top of the page, click on Settings.

2. Click on Conditions on the left of the page.

3. Now, click on Add a New Condition and then click on Show/Hide Field.

4. Set the conditions like you see below:

Let us know if there’s anything else we can help you with.