Try this:
Working jsFiddle Demo
The important things to know are:
One: You need the references in the <head> to these three: (1) the jQuery library, and (2) the jQueryUI library, and (3) the jQueryUI css
Two: Any div at all can be made into a dialog. The div can have any HTML formatting and elements, including buttons, images, input boxes, etc. The div, with all its formatted elements, will appear as such in the dialog.
Three: Usual practice is to first initialize the dialog, but set autoOpen: false,, and then later on you can force it to open with a ('#divID').dialog( 'open' ) command.
Four: The dialog will not auto-close when you click the button. You must close it using the ('#divID').dialog( 'close' ) command
Five: There are many settings you can use when initializing the dialog. Among the most useful or intriguing are:
* autoOpen: true/false,
* width: 500, //Note: no 'px'
* position: 'top',
* draggable: false,
* closeOnEscape: false
Six: To re-use a dialog -- that is, to replace its contents and re-open:
$('#dlgDiv').html('<div>New stuff goes here</div>');
$('#dlgDiv').dialog('open');
Seven: To outright destroy a dialog (allows you to re-create another dlg using .dialog():
$('#dlgDiv').dialog('destroy');
Fully working, stand-alone, cut/pastable example:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function() {
$('#thePopup').dialog({
autoOpen: false,
modal:true,
title: 'You can put any title here:',
width: 800, //default width is 300px, default height is auto
buttons: {
Giraffe: function() {
alert('You hit subMIT');
$('#thePopup').html(''); //empty dlg - always a good idea
$(this).dialog('close');
}
}
}); //END dialog init
$('#mybutt').click(function() {
$('#thePopup').html('<img src="http://placekittens.com/150/150">');
$('#thePopup').dialog('open');
});
}); //END $(document).ready()
</script>
</head>
<body>
<div id="thePopup"></div>
<input type="button" id="mybutt" value="Show the Popup" />
</body>
</html>
Additional Reading:
http://salman-w.blogspot.ca/2013/05/jquery-ui-dialog-examples.html
How to customise jquery ui dialog box title color and font size?
https://www.udemy.com/blog/jquery-popup-window/
How do I pass a an element position to jquery UI dialog
http://api.jqueryui.com/dialog/
jQuery UI dialog button text as a variable
extend jquery ui dialog (add more options)
