How to remove jQuery dialog title on a Dynamic Dialog

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.

I purposely have no title set, perhaps I should dynamically create some attributes for ID ad title on my dynamic div? — Mike Sav
– Mike Sav, Commented Apr 11, 2012 at 10:51
Sorry, I've confused you ... I'll update the question: I want to remove the whole title bar and styling... not just have an empty string where the title usually is. — Mike Sav
– Mike Sav, Commented Apr 11, 2012 at 10:55

james lewis · Accepted Answer · 2012-04-11 11:04:40Z

3

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

edited Apr 11, 2012 at 11:04

answered Apr 11, 2012 at 10:55

james lewis

2,5504 gold badges24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex K. Over a year ago

+1, You can use the dialogClass option in the init event or via .dialog("option " .. to add the additional "dialog-no-title" class

Mike Sav Over a year ago

I'll play around with this but I#m currently getting "Uncaught TypeError: Object #<HTMLDivElement> has no method 'addClass'"

Marco Johannesen · Accepted Answer · 2012-04-11 11:06:19Z

0

As Alex K. suggested you would do:

$(newDiv).dialog({
    closeOnEscape: false,
    draggable: false,
    modal: true,
    resizable: false,
    width: 725,
    dialogClass: 'ui-dialog-noheader' 
});

And then in your CSS

.ui-dialog-noheader .ui-dialog-titlebar {display:none}

Which targets the dialog titlebar inside the noheader class.

answered Apr 11, 2012 at 11:06

Marco Johannesen

13.1k6 gold badges34 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to remove jQuery dialog title on a Dynamic Dialog

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related