Question

I have a dynamic dialog I wish to raise… for example

var newDiv = $(document.createElement('div'));

$(newDiv).html('Hello World');
$(newDiv).dialog({
    closeOnEscape: false,
    draggable: false,
    modal: true,
    resizable: false,
    width: 725

});

All is great however my dynamic dialog has a title which I don’t want. Naturally I can remove this by amending the following CSS class… .ui-dialog-titlebar {display:none}

However I only wish for this instance of the dialog to not have a title and I don’t wish to apply this to all other dialogs within my system. What’s the best way of removing the title on the dynamic dialog? I was thinking of ether chaning the CSS method to the dialog, something like this… $(newDiv).dialog({… stuff}).css() but so far nothing has worked.

I think the problem is due to my dynamic div not having an ID it’s pretty hard to reference… any ideas anyone?

Please note if I haven’t described my issue well please say so and I’LL reword/expand… I’ve been up working for hours and I#m starting to go mad…

PLEASE NOTE TO CLARIFY: I want to remove the whole title bar and styling… not just have an empty string where the title usually is.

Answer 1

You can add a css class to your dynamic dialog called something like “dialog-no-title” and then add the relevant css under that class dialog-no-title {display:none}.

To add a class to a DOM element see the jQuery documentation. It looks something like this: .addClass("dialog-no-title"). I’m guessing you could do something like:

var newDiv = $(document.createElement('div'));  

$(newDiv).html('Hello World');

$(newDiv).dialog({
    closeOnEscape: false,
    draggable: false,
    modal: true,
    resizable: false,
    width: 200,
    dialogClass: 'dialog-no-title'
});

EDIT : updated the code sample to reflect the comments. And here’s a working jsFiddle for you: http://jsfiddle.net/nj2Q9/21/

Cheers,

James