jQuery UI

Dialog Window

jQuery UI Dialog Window
<!doctype html>
  <html lang="en">
  <head>
  <meta charset="utf-8">
  <title>Demo UI Dialog Window</title>
  <link href='https://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">
  <style type="text/css">
  <!--
  .back-to-the-lesson {margin-bottom: 2em;}
body {
  font-family: 'PT Sans', Arial, sans-serif;
  margin: 5%;
  }
a:link, a:visited {
  text-decoration: none;
  color: #c00; 
  }
a:hover {
  color: #f90;
  }
.demo-wrap {
  margin: 0 auto;
  width: 450px;
  }
#demo-container {
  font-size: .85em;
  }
.demo-dialog-caption {
  margin-top: 1em;
  text-align: center;
  background-color: #ccd0cf;
  padding: 5px 10px;
  border-radius: 4px;;
  }
#demo-image-container {
  margin: auto;
  width: 550px;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  }
.ui-dialog-opener-button {
  font-size: 12px;
  }
.ui-dialog-title{
  font-size: 12px !important;
  }
  .ui-button-text {
  font-size: 12px;
  }
  .ui-dialog-buttonpane { font-size: 0.8em; }
  -->
  </style>
  <script>
  // demo link
  $(function() {
  $("#uiDialogOpener").button({icons:{secondary:'ui-icon-newwin'}})
  .click(function(event) {
  event.preventDefault();
  });
  });
  </script>
  <script>
  $(function() {
  $( "#uiDialogWindow" ).dialog({
  width: "auto",
  // height: 450,
  autoOpen: false,
  modal: true,
  buttons: [
  {
  text: "Close",
  click: function() {
  $(this).dialog("close");
  }
  }
  ]
  }); 
  // disable auto focus (on the button)
  $.ui.dialog.prototype._focusTabbable = function(){};
  // open dialog
  $("#uiDialogOpener").click(function() {
  $("#uiDialogWindow").dialog("open");
  });
  });
  </script>
  </head>
  <body>
<!-- ********** -- ********** -->
  <nav><div class="back-to-the-lesson"><a href="../"> ← back to the lesson</a></div></nav>
  <!-- ********** -- ********** -->
<div class="demo-wrap">
<div id="uiDialogWindow" title="Demo Image">
  <div id="ui-dialog-content">
  <div id="demo-image-container" class="ui-widget-content ui-corner-all">
  <img src="images/zebra.jpg" width="550" height="285">
  </div>
  <div class="demo-dialog-caption">Zebra</div>
  </div>
  </div>
  <button id="uiDialogOpener" class="ui-dialog-opener-button">Open Dialog Box</button>
</div>
</body>
  </html>

Zebra