One popular feature of jQuery is its modal dialog:
http://jqueryui.com/dialog/
The jQuery modal dialog function creates a window that overlays the viewport, preventing page content from shining through. It includes a title bar and a content area, and can be manipulated by the user in various ways.
Creating your own popup window
To define a jQuery dialog window, simply create a div element with your desired content inside.
<div id="MyInfo" title="My Popup dialog">
<p id="myContent">Here is 'a bunch of information' and images too!<p>
<img src="anyImage.png">
</div>
Displaying your popup window
The popup div is initially hidden, but can be displayed using the following code:
$( "#MyInfo" ).dialog("open");
If you want to trigger the popup display with a button click, use this code:
$("#myButton").click(function(){ $("#MyInfo").dialog("open"); });
Additionally, jQuery dialogs can be populated with content retrieved via AJAX calls.
$("#myContent").text("Here's some info from an AJAX GET request");
jQuery dialogs offer many customization options, such as animations and buttons, to enhance user experience.