O'Reilly logo

jQuery Cookbook by Cody Lindley

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

13.5. Displaying a Simple Modal Window

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 in action 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.

Note

If you want an even more robust solution, one particularly geared toward showing a wide variety of content and particularly well suited to image galleries, look no further than ThickBox. It is a popular jQuery add-on written by Cody Lindley (one of the coauthors of this book). You can see it in action at http://jquery.com/demo/thickbox/.

Solution

Using jQuery, we can easily find the width and height of the browser viewport and create a ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required