Setting Preview Before Submit widget to open as a pop-up

Is there any way I can use CSS to configure the Preview Before Submit widget to open as a pop-up window when I click the Preview Button Text?

You would not be able to achieve the same effect, but it might look like this:

The gray part covers the entire form and only this is shown.

If you like that and would like to use it, all you would need to do is to add the following CSS to your jotform:

div#checkSubmission {
    background-color: gray;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    z-index: 4;
    overflow-y: auto;
}
div#previewContainer {
    background-color: white;
    border-radius: 20px;
    display: block;
    margin: 100px auto;
    opacity: 1;
    padding: 10px;
    width: 500px;
    box-shadow: 0 0 10px black;
}
#previewContainer li[class] > div {
    display: inline-block;
    text-align: center;
    width: 50%;
}
div#previewButtons {
    min-width: 500px;
    width: 100%;
}

You can see here how to add the CSS code to your jotform: Inject Custom CSS Codes

Do let us know if you have any questions and we would be happy to answer them.

Okay - thank you, Ben.  I'll see if I can get this to work.

You are welcome and do let us know if you want to re-tweek them a bit and we would be happy to assist :)

Hi Ben - I added the code but I do not see any changes.  Is there a specific place I have to insert it?

I am looking at this form, but I can not see the Preview before submit button on it any more: http://form.jotform.us/form/50835190521147

Is some other form being used for this?

In regards to the CSS, the bottom of the custom CSS code is where it should be placed, but the widget must be on the form as well.

Yes, I had to remove it because it was confusing my customers.  This feature still remains on the cloned version I have in My Forms.

I took a look at it, but I will need a bit time. Not sure why, but it does not seem to be working as it was before, but after I check it a bit further I will update you through this thread.

Unfortunately after looking at it a bit further now, the only solution that would work would be to use the source code form instead and add the code for the change manually.

If you are interested in that, we could help you with the javascript code that you would need to add.

The only downside of this would be that your code will no longer be updated on your website as soon as you make the change on your website - instead you would need to grab the new source code, apply again the same custom code and then embed it on your website.