Create Dynamic Pop-ups in XHTML 1.0 Strict Pages

Share this article

I know what you’re thinking: “Pop-ups?” But, instead of looking at the negative way certain Websites and programs spring these nasties upon the unsuspecting populace, let’s think about the good they can do.

Now, several tutorials and scripts are available that allow you to create pop-ups upon clicking a link; others open the popup when the page loads.

But have you found any that allow you to create dynamic pop-ups — windows of different sizes, shapes, and configurations? No? I haven’t, either.

Pop-ups are easy to create: just paste javascript:window.open() in the HREF part of any anchor tag. The problem is that this approach will make your XHTML Web page invalid.

Pop-up Validation
<a href="somewhere.html" onclick="javascript:popupWin()">Some Link</a>

XHTML 1.0 document types do not allow you to place a JavaScript function in the anchor tag’s HREF attribute, but they do allow you to add functions to event handlers such as onclick and onmouseover. The theory of adding these event handlers is fine; the problem is that they look rather unsightly within the page’s XHTML code.

The solution is to put everything in the JavaScript itself — event handlers are essentially JavaScript, anyway!

One REL to Rule Them All

Let’s start by looking at what will cause our pop-up to come alive — the anchor’s markup:

<p><a href="http://www.somewhere.com/" rel="popup|600|400|0|1">SitePoint</a></p>

Notice anything out of the ordinary? That’s right — the REL attribute of the anchor tag looks different than normal.

That value:

  • tells the pop-up JavaScript whether the link should open in a pop-up window
  • dicatates the pop-up’s width and height
  • provides the values to toggle a new window’s attributes on or off
Snap, Crackle, Pop-Up!

Now, let’s look at a common example of the JavaScript function that will open a pop-up:

function popupWin(link,attribs) { 
    var popupWin = null;
    popupWin = window.open(link,'winPopup',attribs);  
}

This JavaScript function looks a lot like the countless other pop-up window scripts out there — but looks can be deceiving!

Instead of having the pop-up window’s destination and attributes specified in the window.open() function, in the function above, they are passed into the window.open() function by the link and attribs variables specified in the popupWin() function’s variables.

Pop Goes the JavaScript

Now, we need a function that will spider all the anchor tags, grab and use several values from those tags and, if they find what they’re looking for, turn those anchor tags into pop-up links. Here’s the code:

function popupWindows() { 
    if(!document.getElementsByTagName) {
         return;
    }
    var scrW = screen.availWidth;
    var scrH = screen.availHeight;
    var anchors = document.getElementsByTagName("a");
    for (var i = 0; i < anchors.length; i++) {
         var anchor = anchors[i];
         var linkDest = anchor.getAttribute("href");
         var relIndex = anchor.getAttribute("rel");
         var relSplit = relIndex.split("|");
         var windowAttributes = "";
         if(relSplit[0] == "popup") {
              if (relSplit[1] > scrW) {
                 pW = scrW - 10;
              }
              else {
                 pW = relSplit[1];
              }
              if (relSplit[2] > scrH) {
                 pH = scrH - 40;
              }
              else {
                 pH = relSplit[2];
              }
              scrX = (scrW - pW - 10) * .5;
              scrY = (scrH - pH - 30) * .5;
              var windowAttributes = "width=" + pW + ",height=" + pH + ",left=" + scrX + ",top=" + scrY + ",screenX=" + scrX + ",screenY=" + scrY;
              windowAttributes += ",location=" + relSplit[4] + ",resizable=" + relSplit[4] + ",scrollbars=" + relSplit[4];
              anchor.setAttribute("href", "javascript:popupWin('" + linkDest + "','" + windowAttributes + "')");
         }
    }
}
window.onload = popupWindows;
Pop-Up Breakdown

The first part of the JavaScript checks to see if the browser opening the document supports the getElementsByTagName method. If it does not, the script exits and the links will open in the same browser window.

if(!document.getElementsByTagName) {
         return;
    }

Next, we assign the variables:

  • scrW will hold the screen’s available width
  • scrH will hold the screen’s available height
  • anchors will hold an array of all the anchor tags on the page

var scrW = screen.availWidth;
    var scrH = screen.availHeight;
    var anchors = document.getElementsByTagName("a");

After these variables are assigned, we start to loop through the anchor tags. As we do so, we get two of the current anchor tag’s attribute values, HREF and REL. We then split up the REL attribute, taking the values between the vertical bars, and putting them into the relSplit array.

for (var i = 0; i < anchors.length; i++) {
         var anchor = anchors[i];
         var linkDest = anchor.getAttribute("href");
         var relIndex = anchor.getAttribute("rel");
         var relSplit = relIndex.split("|");

The next block of code basically checks to see if the first value of the relSplit array is “popup”. If it is, the code checks the next two values of the relSplit array against the scrW and scrH variables from above. If either of the array values is larger than the variable to which it’s compared, the array value will shrink to fit the window.

The next variables, scrX and scrY, calculate the top-left corner position of the pop-up window, in order to center it on the screen.

if(relSplit[0] == "popup") {
              if (relSplit[1] > scrW) {
                 pW = scrW - 10;
              }
              else {
                 pW = relSplit[1];
              }
              if (relSplit[2] > scrH) {
                 pH = scrH - 40;
              }
              else {
                 pH = relSplit[2];
              }
              scrX = (scrW - pW - 10) * .5;
              scrY = (scrH - pH - 30) * .5;

In the next section of the code, the windowAttributes variable is assigned several of the values you would normally find in a pop-up window JavaScript: width, height, left, and top. Two other variables, which control the position of the pop-up window on the screen, also defined here: screenX and screenY.

var windowAttributes = "width=" + pW + ",height=" + pH + ",left=" + scrX + ",top=" + scrY + ",screenX=" + scrX + ",screenY=" + scrY;

You can set other attributes typically associated with JavaScript pop-ups: simply add them to the windowAttributes variable and use the other values in the relSplit array as the attribute’s values. Remember that you must add a '0' or '1', separated by a vertical bar, to the REL value of each link for each attribute you add to the windowAttributes variable.

For this particular script, I don’t want the location bar to display. I also want to be able to resize the window. To achieve these goals, I add the following to the windowAttributes variable:

windowAttributes += ",location=" + relSplit[3] + ",resizable=" + relSplit[4];

After the windowAttributes variable is set, we need to set the HREF value of the anchor tag equal to a normal JavaScript function. In our example, this is achieved with the following code:

anchor.setAttribute("href", "javascript:popupWin('" + linkDest + "','" + windowAttributes + "')");

Pop Into Action

Now, for this solution to work, we must have the JavaScript function load when the page loads. Adding an onload event handler to the BODY tag may suffice, but it will not support our goal of clean markup. Instead, at the end of the JavaScript, we’ll add window.onload = popupWindows. This makes the XHTML code look a lot cleaner, as everything is kept in the JavaScript.

To make your XHTML code even clearer, you can move these JavaScript functions to an external file and link it to every document that uses these pop-up links.

Now, having implemented this solution, you may find that any JavaScript you already have, which uses the window.onload method, no longer works. Don’t despair — just create a new function named initialize and place into it the names of the two functions that need to load when the page loads. Use the window.onload method to call this function.

For example, let’s say I have another script named hideDivs that hides certain divs until the user clicks a link. In this case, the JavaScript function would look like this:

function initialize() { 
    popupWindows();
    hideDivs();
}
window.onload = initialize;

Yet another way to add this script to your page, and have it execute when the page loads, is to use Simon Willison’s closure technique.

Browser Caveat

One problem with this script is the fact that, like Web standards, each browser has its own way to implement this script.

For example, Internet Explorer 5.x and Opera for both Windows and Mac skip over anchor tags for which a REL attribute is not specified, and continue on to the next anchor tag. Mozilla and Netscape browsers, on the other hand, seem to want to “break” the script at any anchor tag for which a REL attribute is not specified. They cease execution of the script and don’t implement it at all.

Remember, if you use this script, a REL attribute must be specified for each anchor tag in your page.

Common Applications

There are several uses for a script such as this.

One example application might involve online photo gallery, where clicking on a picture thumbnail opens the full-sized picture in a pop-up window. Also, if the pictures are different sizes, the size of the pop-up could be specified for each photo.

Further Reading

To learn more about pop-ups and all the good things you can do with them, check out these links:

Frequently Asked Questions (FAQs) about XHTML Strict Popups

What is XHTML Strict and how does it differ from HTML?

XHTML Strict is a version of HTML that adheres to stricter rules and guidelines. Unlike HTML, XHTML Strict requires all elements and attributes to be in lowercase, all attribute values to be quoted, and all tags to be closed properly. It also doesn’t allow the use of deprecated elements and attributes. This makes XHTML Strict more reliable and less prone to errors, but also more challenging to use.

How can I create a popup in XHTML Strict?

Creating a popup in XHTML Strict involves using JavaScript along with XHTML. You can use the ‘window.open()’ method in JavaScript to open a new browser window. This method takes three parameters: the URL of the page to open, the name of the new window, and a string containing a comma-separated list of features (like height, width, etc.) to be included in the new window.

Why are my popups being blocked?

Most modern browsers have built-in popup blockers to prevent unwanted ads. If your popups are being blocked, it could be due to these blockers. You can instruct your users to disable their popup blockers for your site, or design your site in a way that doesn’t rely on popups.

How can I prevent my popups from being blocked?

One way to prevent your popups from being blocked is to make them user-initiated. This means the popup should only appear when the user performs a certain action, like clicking a button. Browsers are less likely to block these types of popups.

Can I style my popups using CSS?

Yes, you can style your popups using CSS. The new window opened by the ‘window.open()’ method is a regular browser window, so you can use CSS to style the content of this window just like you would style any other webpage.

Can I use XHTML Strict to create popups on mobile devices?

Yes, you can use XHTML Strict to create popups on mobile devices. However, keep in mind that the user experience on mobile devices is different from desktop computers. It’s generally best to avoid using popups on mobile devices, as they can be disruptive and difficult to close.

How can I make my popups accessible?

To make your popups accessible, ensure they can be operated using only the keyboard. Also, provide a clear and easy way to close the popup, and make sure the popup and its contents are properly announced to screen readers.

Can I use iframes in XHTML Strict?

Yes, you can use iframes in XHTML Strict. However, the ‘frame’ and ‘frameset’ elements are not allowed in XHTML Strict, so you must use the ‘iframe’ element instead.

How can I test my popups?

You can test your popups by opening your site in different browsers and devices. Make sure to test with popup blockers enabled and disabled, and with different screen sizes and resolutions.

Can I use JavaScript libraries like jQuery with XHTML Strict?

Yes, you can use JavaScript libraries like jQuery with XHTML Strict. These libraries can make it easier to create and manage popups, and they also provide additional features and options.

Michael RaineyMichael Rainey
View Author

Michael began his career in 1998 as Web developer at a small ISP in North Carolina. He currently works as a freelance Web developer/PHP programmer and writes about his life and work here.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form