Displaying a Simple Modal Window - J Query

Problem
With the prevalence of pop-up blocking features being included in most browsers, gone are the days of being able to reliably use window.open() to create a dialog box. Instead,a much more popular and usable solution is to create a modal overlay within the current page, which will take visual precedence until the user interacts with or dismisses it.
It is worth noting that there is a jQuery UI dialog widget that is highly customizable and can be given a theme/skin to match the rest of the UI widgets. You can see it inaction at http://jqueryui.com/demos/dialog.The benefit of using the official widget is that it is officially supported by the jQuery UI community and will continue to evolve and become more robust. The potential drawback is the amount of extra code required, if all you need is a simple modal. On the flip side, the reason one might choose to build a custom modal component is for a smaller code footprint. It is advised that you consider both options and do what best fits the project at hand.

Solution

Using jQuery, we can easily find the width and height of the browser viewport and create a dimmed layer to sit atop the entire site design. Using CSS positioning, we can then place our modal “window” (which in fact is simply a <div>layer) front and center to draw the user’s attention to it, as shown in

A-modal-window,-created-with-jQuery

Figure : (A modal window, created with jQuery).

Various types of content can be displayed, including images, Ajax-loaded HTML fragments, and in-page markup.

Modal—HTML code

Modal—jQuery code

Discussion

Our modal solution begins by defining a variable that acts as a Boolean value, representing whether the browser is Internet Explorer 6. To determine this, we perform two quick evaluations. Once we know if we are faced with IE 6, we can use that knowledge to patch functionality. You will also notice that there is a conditional comment included in the markup fragment that we dynamically create:

At first glance, this might be confusing because if the browser is Internet Explorer 6,an empty iframe is inserted that does not reference any included page content. The reason we do this is to trick IE 6 into allowing our modal to overlap any <select>form elements that might be in the page. If we do not use this workaround, then all<select>elements on the page will essentially “poke through” the modal overlay, making for a quite disorienting user experience.
Next, we create a function to house all the calculations that need to be performed in order to center the modal window inside the viewport. While we could have done this all in CSS and simply hard-coded the width and height, this allows for greater flexibility. The developer implementing this JavaScript need only set the width of the modal in CSS, and our function takes care of the rest, even allowing for content of varying height.
The next function exists for, and is only ever called by, Internet Explorer 6. This patches
IE 6’s lack of CSS support for position: fixed. For all other browsers, our modal will remain centered vertically and horizontally as the user scrolls a long document. In IE
6, however, we need to specifically tell the modal to adjust its position as the user scrolls.
We will do so by calling this function later in the file.
Actually revealing the modal window is simple enough. We have bundled all the necessary code for that into showModal(). It contains a call to positionModal() if the browser is IE 6. It shows the modal wrapper <div>and calls sizeModal() to center the modal and size it according to its content’s height. Once sized correctly, the modal window itself is shown. An on load function is also attached to any dynamically inserted images.
This is to account for browsers not knowing the dimensions of an image until it is fully cached. Note that showModal() isn’t actually called until later in the file.
When the document loads, we attach the modal markup right before the close of the
</body>.
Click listeners are attached to all links with class="modal". When a modal link is clicked, there is a series of evaluations done in order to determine what type of content is to be loaded. First if the link begins with a hash (#) and is followed by one or more characters, we know that there is in-page content being linked to. In such cases, the HTML content is copied from that ID into the modal. The second case involves images.
If the href ends in .jpg, .png, or .gif, then an <img>tag is created, and the hrefis copied in to the src. Thirdly, if none of the previous criteria is met, we are most likely dealing with an external page. In this case, jQuery’s.load() method is called, retrieving the
HTML from that page (and from a specific ID if a hash exists) and inserting it into the modal.
The next chunk of code adds click event listeners to the modal overlay (the gray background)and the close button. If either of these is clicked, the modal will be hidden, all modal images will be stripped of their event listeners, the modal content will be set to an empty string, and the text in the modal window’s title bar will be reset.
Last is an event listener specifically for IE 6 that watches for the window to scroll. If the modal window wrapper is visible (and implicitly everything else associated with the modal window), then positionModal() is called continuously as the user scrolls the page. This ensures that the modal window stays in place via mimicking position:fixed.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics