JavaScript / jQuery Tutorial Demo 3

Demo 3 - Dialog

Use jQueryUI to add a dialog box in a viewport in an overlay. It's also resizeable and dragable'.

This is the dialog for displaying information. This window can be dragged, resized and closed.

REMEMBER: You have to download and add jQuery and jquery-ui plugins
  <script> tags before the closing body tag to get these to work.
	
<!-- HTML -->

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript / jQuery Tutorial Demo 1
<link href="styles/ui-lightness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles/styles.css">
</head>
<body>


	<div class="demo">
			<button class="btn_ViewDialog">Open Dialog</button>
			<div id="jqui_dialog" title="Your Basic dialog Title goes here">
			  <p>This is the dialog for displaying information. This window can be dragged, resized and closed.</p>
			</div>		
	</div>

<!-- Important for you to go to jQuery UI and download the plugin for the date picker for this one -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.10.4.custom.min.js"></script>
<script src="scripts/script.js">
</body>
</html>

	
/* CSS 
   Be sure to get a theme with your download and make sure to reference 
   it in the head section. 
   For example: href="styles/ui-lightness/jquery-ui-1.10.4.custom.css"
   (See the HTML source above)
   For my demo the style below is used as well though is can be 
   modified as you like. 
*/

.demo {
	padding:20px;
	font-size:20px;
	background-color:#FFBBBC;
}

/* begin by hiding the div for the dialog 
   we will use the click event and jQuery to display the dialog */

#jqui_dialog{
	display:none;
}

	
// JavaScript Document - include this in your src="scripts/script.js file

// Demo 3 dialog

var $btnViewDialog = $('.btn_ViewDialog');

$btnViewDialog.click(function(){
	$( "#jqui_dialog" ).dialog({
			width: 500,
			buttons: [
				{
					text: "Ok",
					click: function() {
						$( this ).dialog( "close" );
					}
				}
			]}
		);
});


		
	
In the style sheet I hide the #jqui_dialog. 
We will open the dialog with JavaScript when the button is clicked.
Easy peasy