A small wrapper snippet to make it simple to create popup modal dialogs using jQuery UI.

popupWrapper.html

<!-- 
Usage:
	initDialog("Add a Staff Member",true,updateContact);
	appendForm($( "#dialog-form" ),"addStaff","?module=staff&mode=add");
	appendDetail($( "#addStaff_id" ),"First Name:","first_name","");
	appendDetail($( "#addStaff_id" ),"Last Name:","last_name","");
	openDialog();
	
	initDialog:		(form title str, destroyOnClose, submitCallback)
	appendForm:		(id to append to - will make this deprecated, will always be this ojbect
					id of form,
					the [action])
	appendDetail:		the ID of your [appendForm] (suffix automatically added)
					label str,
					input name str
	openDialog:		Self explanetory.
	
	Submit function automatically serializes all inputs and sends to the [action] url.
-->

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript">

// *******************************************//
// Modal Dialogs
// *******************************************//
function initDialog(title,destroyOnClose,callback) {
    $('#page-wrap').append('<div id="dialog-form" title="'+title+'"></div>');
    $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Submit": function() {
                var ajaxValues = $("#dialog-form form").serialize();
                var ajaxUrl = $("#dialog-form form").attr('action');
                var id=0;
                $.ajax({
                    data: ajaxValues,
                    async: false,
                    type: 'POST',
                    url: ajaxUrl,
                    success: function(id) {
                        callback(id);
                    }
                });
                $( this ).dialog( "close" );
                return false;
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            //allFields.val( "" ).removeClass( "ui-state-error" );
            if (destroyOnClose) {
                $( "#dialog-form" ).dialog( "destroy" );
                $( "#dialog-form" ).remove();
            }
        }
    });
}
function openDialog() {
    $( "#dialog-form" ).dialog( "open" );
    $('.ui-dialog-buttonset button:first-child').addClass('btn btn-primary');
    $('.ui-dialog-buttonset button:last-child').addClass('btn');
}
// *******************************************//
// Form aids
// *******************************************//
function appendForm(obj,name,action) {
    obj.append('<form id="'+name+'_id" name="'+name+'" action="'+action+'" method="post"></form>');
}
function appendDetail(obj,label,name,value) {
    obj.append('<label></label>');
    var labelElement = obj.find('label:last-child');
    labelElement.attr('for', name+"_id");
    labelElement.text(label);

    obj.append('<input/>');
    var inputElement = obj.find('input:last-child');
    inputElement.attr('id', name+"_id");
    inputElement.attr('name', name);
    inputElement.val(value);
}
function appendCheckbox(obj,label,name,checked) {
    obj
        .append(
            $(document.createElement('label')).attr({
                'for':  name + "_id"
            }).text( label )
        )
        .append(
        $(document.createElement("input")).attr({
             id:    name + "_id"
            ,name:  name
            //,value: item
            ,type:  'checkbox'
            ,checked:valToBool(checked)
        })
    );
}
function appendMultiple(obj,label,name,items) {
    obj
        .append(
            $(document.createElement('label')).attr({
                'for':  name + "_id"
            }).text( label )
        )
    var selector = document.createElement('select');
    selector.id = name+"_id";
    selector.name = name;
    selector.multiple = true;


    for (var i in items) {
        if (items[i].childNodes!=undefined) {
            var selected = parseInt(items[i].childNodes[1].textContent);
            var optionItem = document.createElement('option');
            optionItem.value = items[i].attributes["id"].nodeValue;
            optionItem.text = items[i].childNodes[0].textContent;
            if (selected) {
                optionItem.seleted = true;
            }
            selector.appendChild(optionItem);
        }
    }

    obj.append(selector);
}
function appendImage(obj,src) {
    obj
        .append(
            $(document.createElement('img')).attr({
                'src':  src
            })
        )
}
function appendOption(obj,name,value,parent) {
    var selectItem = document.getElementById(obj);
    var optionItem = document.createElement('option');
    optionItem.value = value;
    optionItem.text = name;
    selectItem.appendChild(optionItem);
    if (parent!=undefined) {
        $(optionItem).attr('parent',parent);
    }
}
function appendHidden(obj,name,value) {
    obj.append('<input/>');
    var inputElement = obj.find('input:last-child');
    inputElement.attr('id', name+"_id");
    inputElement.attr('name', name);
    inputElement.css('display', "none");
    inputElement.val(value);
}
</script>