Creating a dynamic image-based dialog
The class behind the dialog widget is compact and caters to a small range of specialized behavior, much of which we have already looked at. We can still have some fun with a dynamic dialog box, which loads different content depending on which element triggers it.
In a new page in your text editor, add the following code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dialog</title> <link rel="stylesheet" href="development-bundle/themes/redmond/jquery.ui.all.css"> <link rel="stylesheet" href="css/dialogTheme.css"> <script src="js/jquery-2.0.3.js"></script> <script src="development-bundle/ui/jquery.ui.core.js"></script> <script src="development-bundle/ui/jquery.ui.widget.js"></script> <script src="development-bundle/ui/jquery.ui.position.js"></script> <script src="development-bundle/ui/jquery.ui.dialog.js"></script> ...