How to replace dialog header in jQuery UI?

Question

I want to remove dialog header in jQuery UI and add my close button. Close button is image, when user click image, dialog'll be closed. This my snippet:

$("#dialog-model").dialog({
    create: function (event, ui) {
        jQuery(".ui-dialog-titlebar").hide();
        $("#dialog-model").css({ 'font-family': 'Helvetica', 'padding': '0', 'font-size': '12px' });
    },
    height: 500,
    width: 900,
    modal: true,

});

I try to add image in scipt but it doesn't work

Answer 1

UPDATE ANSWER

Try this one? DEMO http://jsfiddle.net/yeyene/GnpQ8/2/

Create a custom close button.

$(document).ready(function(){
    $("#dialog-model").dialog({
        create: function (event, ui) {
            $('.ui-dialog-titlebar').css({'background':'none','border':'none'});
            $(".ui-dialog-titlebar").html('<a href="#" role="button"><span class="myCloseIcon">close</span></a>');
            $("#dialog-model").css({ 'font-family': 'Helvetica', 'padding': '0', 'font-size': '12px' });
        },
        width: 250,
        height: 150,       
        modal: true,
        resizable: false
    });
    
    $("span.myCloseIcon").click(function() {
        $( "#dialog-model" ).dialog( "close" );
    });
});