jQuery UI Dialog buttons Demo

xHTML Code
jQuery Code

The Source HTML

<a class="dialog_but" href="#">Button 1</a>
<div class="dialog_content">This is Dialog One!</div>
<a class="dialog_but" href="#">Button 2</a>
<div class="dialog_content">This is Dialog One!</div>
<a class="dialog_but" href="#">
Button 3
</a>
<div class="dialog_content">
<p>Another dialog prompt with a little bit <em>More</em> <strong>HTML</strong></p>
<img src="image/nice_robot.png" style="float: right; margin: 0 0 10px 10px" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et mauris erat. Morbi placerat semper sodales. Pellentesque sollicitudin quam id erat iaculis convallis eleifend odio aliquet. Aenean pulvinar adipiscing enim id sodales. Pellentesque tellus eros, interdum vel dignissim ac, dignissim sit amet dui. Integer felis augue, condimentum eget ullamcorper et, hendrerit at lacus. Nulla placerat ipsum at risus consectetur sit amet suscipit dui pellentesque. Sed sed elit a orci ornare posuere bibendum sodales turpis. Fusce euismod ante ut nunc pharetra facilisis. Nulla laoreet malesuada lacus, in sagittis urna adipiscing nec. Proin accumsan dolor vitae urna convallis non pretium odio convallis. Integer nisi lorem, varius in bibendum sit amet, scelerisque vel libero. Proin placerat pharetra congue. Sed tempus augue vitae nisl viverra hendrerit at nec purus. Vivamus laoreet erat vel turpis scelerisque at elementum sapien ultrices. Nulla at leo diam. Praesent hendrerit imperdiet ultricies. Curabitur vestibulum turpis in lacus faucibus convallis. Quisque nec magna nulla.
</p>
<p>
Nullam orci nisi, laoreet eget adipiscing sit amet, porta ut leo. Nulla at condimentum mauris. Duis sed lectus ligula, a scelerisque eros. Donec bibendum eleifend ullamcorper. Pellentesque eu ante sed augue feugiat condimentum sit amet eu leo. Sed sodales ipsum at risus iaculis ac bibendum odio faucibus. Phasellus leo ligula, euismod id interdum vel, convallis ac sapien. Sed ut felis mauris. Suspendisse faucibus aliquam tortor a convallis. Fusce aliquet libero id arcu condimentum tincidunt. Morbi laoreet, ante nec tristique porta, eros odio molestie urna, eget accumsan nibh ligula ut nisi. Curabitur suscipit eros at sapien vestibulum blandit ut vitae orci. Integer vitae risus ante, in dapibus felis. Curabitur dignissim nisl ut dui suscipit at eleifend metus feugiat. Maecenas porta sagittis aliquam.
</p>
</div>

jQuery Code

//do when the dom is ready
jQuery(document).ready(function($) {
//loop through every button anchor element
$('.dialog_but').each(function() {
//create a local scope of a dialog variable to attach
var $dialog;
//create the dialog for the div.dialog_content standing next to the anchor element
//we make the autoOpen false so that it can be reusable
//also we set the modal = true to appear the dialog as a modal prompt
$dialog = $(this).next('div.dialog_content').dialog({modal: true, autoOpen: false, width: 600});
//add a wee bit of button thing
$(this).button({
icons: {
primary: 'ui-icon-extlink'
}
});
//now attach the open even of the dialog to the anchor element
$(this).click(function(e) {
//prevent the anchor element to go to the hyperlinked page
e.preventDefault();
//open the dialog
$dialog.dialog('open');
});
});
});

Dialog Buttons

Button 1
This is Dialog One!
Button 2
This is Dialog One!
Button BIG

Another dialog prompt with a little bit More HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et mauris erat. Morbi placerat semper sodales. Pellentesque sollicitudin quam id erat iaculis convallis eleifend odio aliquet. Aenean pulvinar adipiscing enim id sodales. Pellentesque tellus eros, interdum vel dignissim ac, dignissim sit amet dui. Integer felis augue, condimentum eget ullamcorper et, hendrerit at lacus. Nulla placerat ipsum at risus consectetur sit amet suscipit dui pellentesque. Sed sed elit a orci ornare posuere bibendum sodales turpis. Fusce euismod ante ut nunc pharetra facilisis. Nulla laoreet malesuada lacus, in sagittis urna adipiscing nec. Proin accumsan dolor vitae urna convallis non pretium odio convallis. Integer nisi lorem, varius in bibendum sit amet, scelerisque vel libero. Proin placerat pharetra congue. Sed tempus augue vitae nisl viverra hendrerit at nec purus. Vivamus laoreet erat vel turpis scelerisque at elementum sapien ultrices. Nulla at leo diam. Praesent hendrerit imperdiet ultricies. Curabitur vestibulum turpis in lacus faucibus convallis. Quisque nec magna nulla.