Open div tag based dialog : UI Dialog « jQuery « JavaScript Tutorial

<html>
  <head>
    <script type='text/javascript' src='js/jquery-1.3.2.js'></script>
    <script type='text/javascript'>
$(document).ready(
  function() {
    $('input#tmpOpen').click(
      function($e) {
        $('div#myDialog').show(5000);
      }
    );
    
    $('input#tmpClose').click(
      function($e) {      
        $('div#myDialog').hide(5000);
      }
    );
  }
);
    </script>
    <style type='text/css'>
div#myDialog {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 200px;
    margin: -101px 0 0 -251px;    
    border: 1px solid rgb(128, 128, 128);
}

div#tmpButtons {
    position: absolute;
    bottom: 5px;
    right: 5px;
}
    </style>
  </head>
  <body>
     <input type='submit' id='tmpOpen' value='Open' />
     <div id='myDialog'>
       <p>
         Dialog content
       </p>
       <div id='tmpButtons'>
         <input type='submit' id='tmpClose' value='Close' />
       </div>
     </div>
  </body>
</html>

30.141.UI Dialog
	30.141.1.	jQuery UI Dialog
	30.141.2.	Basic Dialog modal
	30.141.3.	Modal confirmation
	30.141.4.	Modal form
	30.141.5.	Modal message
	30.141.6.	Set dialog height
	30.141.7.	Add ok button to dialog and link with event handler
	30.141.8.	Dialog open event
	30.141.9.	Dialog closed event
	30.141.10.	Dialog animation: close
	30.141.11.	Open a dialog through a button click event
	30.141.12.	Close a button after pressing OK button
	30.141.13.	Set auto open to true
	30.141.14.	Destroy a dialog
	30.141.15.	Get the input value from a dialog
	30.141.16.	Closed action
	30.141.17.	Open div tag based dialog
	30.141.18.	Slide in/out dialog
	30.141.19.	Fade in/out dialog