Popup Overlay Auto-Applied to an Anchor with jqModal

Working on a relatively straightforward page, I want to have some of the simpler static contact come up as an overlay style of popup. Following web standards, it would be nice to have this code automatically work based on a CSS class. This would provide two benefits: easy to add more such links without writing new code and it will work without javascript.

I worked through a solution using a variety of samples. The project uses html5, jquery, and the jqModal plugin.

The footer code where I have the link I want to change gets the “popup” css class added to it.

          <a href="terms.html" class="popup">Terms</a>

terms.html itself is a simple static html page with a header and some paragraphs, so I won’t show it here. I’ll only mention that it can still have html and body tags of it’s own.

In css, I have some simple styling in place for jqModal to use.

.jqmWindow {
    display: none;
    
    position: fixed;
    top: 17%;
    left: 50%;
    
    margin-left: -300px;
    width: 600px;
    height: 600px;
    overflow:auto;
    
    background-color: #EEE;
    color: #333;
    border: 1px solid black;
    padding: 12px;
}

.jqmOverlay { background-color: #000; }

Finally, here’s the javascript that sets it all up. If you were going to use this on multiple pages, you might want to move it into it’s own file.

      <script type="text/javascript" 
            src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js">
      </script>
      <script type="text/javascript" src="jqModal.js"></script>

      <script type="text/javascript">
        var dialogs = {}; // cache for dialogs keyed by url

        $().ready(function() {
          $('a.popup').click(function(event){
            event.preventDefault();
            var url = $(this).attr('href');
            if(!(url in dialogs)) {
              dialogs[url] = 
                $("<div class='jqmWindow'>Loading content</div>");
              $(dialogs[url]).jqm({ajax:url});
              $('body').append(dialogs[url]);
            }
            $(dialogs[url]).jqmShow();
          });
        });
      </script>

First, you’ll notice the code references jquery via the Microsoft CDN. It also pulls in a local copy of jqModal.

Then, I declare a page level variable. “Global” variables are not something to use often, but as a page level cache, this is actually an appropriate use. If this was off in it’s own file, you may want to use namespacing tricks in javascript to avoid name collision (outside the scope of this example).

Next, in jquery’s document ready function, we add a click handler for any anchor (link) with the class popup. It stops the default behavior (which for a link is to submit a get request). Then, the function tests to see if it has already setup a dialog div for that url. If not, it creates the html for the div with the proper jqModal class, and adds it to the body. Finally, it sets up the dialog div to load the url from the associated anchor via ajax.

The final step after either creating or fetching the dialog div, is to call it’s jqmShow() method.