PopUp windows and PopUp boxes can be used to show additional information or help text on specific region, buttons, links or words on the page. Move the mouse-cursor over some of the blue, bold words in this text to see it in action.
The html and css code that is used for this visual effect is here:
<div id="popUp" style="width: 220px;">
<img src="/controls/images/point.gif" style="position:relative;top:1px;z-index:1;display:block; border: 0px; margin-left: 20px">
<div style="position:relative;border: solid #203050 1px; padding: 4px;height:70px; background-color:#eaeef7;">
More information is displayed when the mouse is over the keyword for some time.
</div>
</div>
The popup implementation exists only once on a page and is registered for the whole document. To identify html objects that will cause a popup to be shown the new attribute poptext is used. Every object that has this property set will cause a popUp to be shown.
This attribute alone will not help a lot because the user also needs some hint to see that there is some information available when pointing with the mouse at it. To have a consistent look & feel I use a span element and the classname VEKeyword.
<span class="VEKeyword" poptext="More details is available here.">[more]</span>
The current CSS definition for this class is
.VEKeyword {font-weight:bold;color:#203050;cursor:pointer}
and it can be found in the central css file (view source) I use for this site.
When displaying the popUp element an absolute position is used to place it nearby the object that should be explained.
First the method _absolutePosition is calculating the absolute position of the object by walking the offsetparent hierarchy up the hierarchy. This method is returning a JavaScript object with the values top left width and height.
This position together with the text that should be displayed is the used by the _create method.
If a popUp is displayed for the first time a new object is created and gets the id="VEPopUp". Later when another popup is needed this object will be reused.
When the mouse enters the region of an object the popup should not displayed immediately to avoid flickering but after some time (I choose 300 msec.) the popUp should appear. When the mouse pointer moves on to another element before this time is over no popUp should appear.
2 methods are registered to the 2 events onmouseover and onmouseout. The onmouseover event starts a timer by using a timeout that will then start the show method. If the mouse leaves the element in this time the timer is killed before the popup is shown.
The sourcecode for the popup mechanism can be found in the popup.js and all you have to do is including this file on every page. This file contains a JavaScript Behaviour element that will be attached to the document object. Be sure that the jcl.js file that implements attaching the event handlers is also included.
To make the integration of the popup mechanism into existing pages easy for you and to support the design view of the development environments the mechanism is also wrapped into a web control implemented in popup.ascx. Just include this control in the page or master page. It takes care of also including the jcl.js file.
Hint: When using web controls they have to be registered on each page or global for the whole web application. To avoid repeating the declarations on every page and for using the same namespace-alias every time I add the registration to the web.config file of this site.
The popup always has the width of 220px. The height depends of the text that is displayed.
One of the main benefits of the AJAX technology is that additional information can be retrieved from the server after the initial load of the page.
You can find an advanced implementation using AJAX and a WebService here.
This page is part of the http://www.mathertel.de/ web site.