http://jqueryui.com/dialog/#modal
http://jqueryui.com/tooltip/
http://api.jqueryui.com/dialog/
http://www.w3.org/Style/Examples/011/firstcss.en.html
http://tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/

The essential idea is:
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable" style="position: absolute; height: auto; width: 560px; top: 42px; left: 498px; display: block;" tabindex="-1" role="dialog" aria-describedby="dialog-modal" aria-labelledby="ui-id-1"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-1" class="ui-dialog-title">Facebook - Google Chrome</span><button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close"><span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span></button></div><div id="dialog-modal" style="overflow: hidden; background-color: rgb(241, 241, 241); width: auto; min-height: 0px; max-height: none; height: 552px;" class="ui-dialog-content ui-widget-content">

Further, if we look at ui-front: we found z-index: 100


<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>



.ui-widget-header {
	border: 1px solid #aaaaaa;
	background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x;
	color: #222222;
	font-weight: bold;


}


.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
	color: #33CCFF;
}


<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close"><span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span></button>