Popups - demo help system

Home > Basic Functions > Context-sensitive Help > Web Applications > Popups

Popups

Instead of opening the entire help system, you can display individual help pages in a popup window. Follow the steps below to add a popup help window to your Web application.

1. Open a page (such as a login form) of your web application using an HTML editor such as Visual Studio or a text editor such as Windows Notepad. This is an example of a simple login form.

<html><body>
<br><br>
Username: <input><br>
Password: <input><br><br>
<input type=button value=Login>
</body></html>

2. Add the following code to display a link for a popup help window.

Open a Dynamic Help Page

<html><body>
<br><br>
<div id=popup style="width:277;position:absolute;border:1px solid black;display:none;background-color:white">
<a href="#" style="cursor:pointer;" onclick="getElementById('popup');e.style.display='none'">
<font face=arial size=1 color=#D0CECE>close</font></a><br>
<iframe frameborder=no width=275 height=124 src='http://www.domain.com/help/page.aspx?pageid=project_login'></iframe></div>
Username: <input><br>
Password: <input><br><br>
<input type=button value=Login>
<a href=#" onclick="e=getElementById('popup');e.style.display='';e.style.top=event.clientY document.body.scrollTop-40;e.style.left=event.clientX document.body.scrollLeft;">Help</a>
</body></html>

Open a Static Help Page

<html><body>
<br><br>
<div id=popup style="width:277;position:absolute;border:1px solid black;display:none;background-color:white">
<a href="#" style="cursor:pointer;" onclick="getElementById('popup');e.style.display='none'">
<font face=arial size=1 color=#D0CECE>close</font></a><br>
<iframe frameborder=no width=275 height=124 src='help/project login.htm'></iframe></div>
Username: <input><br>
Password: <input><br><br>
<input type=button value=Login>
<a href=#" onclick="e=getElementById('popup');e.style.display='';e.style.top=event.clientY document.body.scrollTop-40;e.style.left=event.clientX document.body.scrollLeft;">Help</a>
</body></html>

* the url above assumes that the static help system is in a sub folder named 'help'

3. Open the html file in your browser. Click the 'Help' link to display the popup help window.