Scalable Modals

The client wanted a custom modal dialogue box for the MooTools JavaScript framework that would improve upon Apple.com’s modal.

Goals: Write a modal dialogue box with easy implementation and scalability for users who have minimal CSS knowledge and no JavaScript or programming experience.

Solutions: To make the modal object-oriented, I created two classes: a collection class to define all the modals on each web page, and another class to define the properties and methods for each individual modal. The collection class loops through the DOM looking for anchor tags that include the individual modal class, and it initiates the modal class using the attributes from the
anchor tag.

Each modal class builds a div and iframe-based HTML at the bottom of the page and attaches the onClick events to the anchor tag. The href attribute defines the source of the iframe, which defines the content of the modal.

The result is a modal that’s easy for a contributor to implement by merely creating an iframe HTML page with the modal content. They can then use an anchor tag to link the element to the iframe and define size parameters. The JavaScript does the rest.

To address the challenge of using rounded corners on a modal, I implemented a browser sniffer to determine which browser is being used. If the page is being viewed on Firefox or WebKit, a CSS3 class is attached the modal, using a border radius and box shadow to improve performance. For Opera or Internet Explorer, the modal is built with HTML using the CSS2 approach to rounded corners, with a transparent PNG for the drop shadow. For older browsers, I use a CSS1 class with a simple border treatment and
square corners.