jquery ui dialog

by bradleytrager

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

CSS

/*!
 * jQuery UI Bootstrap (0.5)
 * http://addyosmani.github.com/jquery-ui-bootstrap
 *
 * Copyright 2012 - 2013, Addy Osmani
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * Portions copyright jQuery UI & Twitter Bootstrap
 */


/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { 
  border: 0; clip: rect(0 0 0 0);
  height: 1px; 
  margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px; 
}
.ui-helper-reset { 
  margin: 0; 
  padding: 0; 
  border: 0; 
  outline: 0; 
  line-height: 1.3; 
  text-decoration: none; 
  font-size: 100%; 
  list-style: none; 
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
}
.ui-helper-clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.ui-helper-clearfix { 
  /*display: inline-block; */
  display:block;
  min-height: 0; /* support: IE7 */
}
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { 
  height:1%; 
}

/* end clearfix */
.ui-helper-zfix { 
  width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0; 
  position: absolute; 
  opacity: 0; 
  filter:Alpha(Opacity=0); 
}
.ui-front {
  z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { 
  display: block; 
  text-indent: -99999px; 
  overflow: hidden; 
  background-repeat: no-repeat; 
}


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}

/*
 * jQuery UI Resizable 1.10.0
 *
 * Copyright 2013, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/resizable/
...

JavaScript

$(function() {
    $( "#dialog" ).dialog();
  });