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 Web page
- 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.
- 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.
- In the toolbar, click Pop-up & Lightbox
- Click on the Pop-Up Window tab.
- Specify the following:
- Width. Enter 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.
- 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:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<a href="javascript:void( window.open('http://helpiq.helpdocsonline.com/static/ID629', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500'));">View</a>
</body>
</html>
Step 4 - Save and preview
After you add the code to your web page, save the web page, 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)
If you are familiar with HTML/Javascript you can add more attributes. Here is a list of all the window attributes you can add http://www.websitesetup.org
Adding Multiple Pop-Ups to a Web page
Unlike light boxes, there are no special instructions for adding multiple pop-ups to a web page.
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 web page or web application, you do not have to worry about making any updates on your web page. 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 web page. 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 web page. Our goal is to make help content management easy for you.
Related Articles:
Callouts
Add a Lightbox
Create a Tooltip