Popup Window

You can add a small code snippet to your website or web application that will open a page in a new web browser pop-up window. These are not the old-school pop-up windows we all used to fear, the ones that triggered pop-up blockers. Instead this new pop-up window is safe and secure, and uses a small piece of JavaScript that will open a page with a specific window width and height.

• How to Add a Pop-Up to Your Site
• The Code Snippet
• Adding Multiple Pop-Ups to a Webpage
• Page Style and CSS
• Updating Content

How to Add a Pop-Up to Your Site

Step 1 - Generate the pop-up window

You can turn any ProProfs page into a browser pop-up.ProProfs page into a browser pop-up.

1. Locate the page in ProProfs you want to add to your website or web application.ProProfs you want to add to your website or web application.
2. In the toolbar, click Pop-up & Lightbox
3. Click on the  Pop-Up Window tab.

1. Specify the following:
   • Width. Enter in the width of the browser window. The default is 500 pixels.
   • Height.  Enter in the height of the browser window. The default is 700 pixels.
   • Use https. If your website or web application runs on https:// (SSL) then check this box. This will update the link in the code from http:// to https://
   • Test. Clicking the Test button will open the pop-up so you can test it before you copy the code.
      

Step 2 - Copy the code snippet

The next step is to copy the code snippet from ProProfs and paste it in your website.ProProfs and paste it in your website.

1. Right-click inside the input box, and select Copy.
    

Step 3 - Paste the code in your website or web application

The next step is to add the code to your website.  To do this, simply copy and paste the code snippet to your website where you want the pop-up to appear. It will insert a hyperlink to open the pop-up.

If you work with a developer, simply copy the code, and email it to the developer.

Here is an example of the pop-up code in a basic HTML webpage:

Step 4 - Save and preview

After you add the code to your webpage, save the webpage, and preview it.

The Code Snippet

We have added these //comments next to each line to help explain the code snippet

scrollbars=yes  // (yes or no) turn the browser scrollbar on or off
toolbar=no  // (yes or no) include the web browser's toolbar
width=700  // the width of the web browser window (type the number you want here)
height=500 // the height of the web browser window (type the number you want here)
">View</a>  // this is the link name (change this to whatever you want)
 

Adding Multiple Pop-Ups to a Webpage

Unlike lightboxes, there are no special instructions for adding multiple pop-ups to a webpage.

Page Style and CSS

The page's style and formatting are defined by your CSS. At this time, you cannot change the style of the pop-up contents.

Updating Content

Once you have added the code snippet to your webpage or web application, you do not have to worry about making any updates on your webpage. You do not have to copy and paste the code to your pop-up each time you make an update in ProProfs. Any updates you make in ProProfs to a page's content will instantly update the pop-up on your webpage. Our goal is to make help content management easy for you.ProProfs. Any updates you make in ProProfs to a page's content will instantly update the pop-up on your webpage. Our goal is to make help content management easy for you.