This example shows how to do jQuery UI dialogs in DNN.

gistfile1.html

/*
 * The magic to make dialogs work in DNN is to use the dialogClass option.  Set it to dnnFormPopup and it will
 * be styled using the standard DNN styles.
 */
<script>
  $(function() {
    $( "#dialog-modal" ).dialog({
      height: 140,
      modal: true,
      dialogClass: "dnnFormPopup"
    });
  });
</script>


<div id="dialog-modal" title="Basic modal dialog">
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

It would be helpful to have code here for how to open the dialog on a click event.

@efficiondave, this is not 100% tested, but should be something like this:

<%@ Register TagPrefix="dnn" TagName="jQuery" Src="~/Admin/Skins/jQuery.ascx" %>

<dnn:jQuery runat="server" jQueryUI="true" />

<script>
$(function() {
    // init dialog
    $( "#dialog-modal" ).dialog({
        height: 140,
        modal: true,
        dialogClass: "dnnFormPopup"
    });
});

function showDialog(element) {
    // tweak and show dialog
    $("#dialog-modal")
        .dialog("option", "title", element.getAttribute ("data-dialog-title"))
        .dialog("open");
}
</script>

<!-- dialog markup -->
<div id="dialog-modal">
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

<!-- button to show dialog -->
<a role="button" href="#" onclick="showDialog(this)" data-dialog-title="Basic modal dialog">Click me!</a>