dialog box

by Akram kamal

HTML

<div id="dialog" title="Basic dialog" class="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>
	<br />
	
	<ul id="suggestions0">
		<li id="suggestion0-0" class="suggestion">BLO</li>
		<li id="suggestion0-1" class="suggestion">BLU</li>
		<li id="suggestion0-2" class="suggestion">BLL</li>
		<li id="suggestion0-3" class="suggestion">BOO</li>
		<li id="suggestion0-4" class="suggestion">CLA</li>
	</ul>
	<div id="footer">
		<span id="manual-0" class="manual">MANUAL</span><span id="next-0" class="next">Next</span>
  </div>
	<br />
</div>	
<body>

<?prettify lang=java linenums=false?>
<pre class='prettyprint' >
	<code>
<span class="OK" id="highlight-0">OK</span>
</code>
</pre>



</body>

CSS

#iconhelp{
    cursor: pointer;
    float: right;
    margin-right:10px;
    margin-top: 3px;
}

table {
	font-size: 1em;
}

ul
{
    margin:0;
    padding-left:30px;
    display: inline;
}

ul li 
{
    margin: 30px;
    padding: 00px;
    text-indent: 0.5em;
    margin-left: -0.5em;
     display: inline;

}

.footer {
	position: relative;
}

.manual {
    float: left;
    padding-left: 20px;
    background : yellow;
}

.next {
    float: right;
    padding-right: 20px;    
    background : cyan;
}

.dialog {display: none;}

JavaScript

$( "#dialog" ).dialog({ autoOpen:false, dialogClass: 'test' });

$('span.OK').click(function() {
       $("#dialog").dialog('open');                     		
});

$(".test").children(".ui-dialog-titlebar").append("<span id='iconhelp' class='ui-icon ui-icon-help'></span>");

$("#iconhelp").click(function(){
   alert('help');
});