How to add a footer to the popup dialog in jquery?

Question

I am trying to create popup using the jqueryui dialog. I am trying to add a footer after the content in the dialog.

my dialog should look like

<popup>
 header-html
 content-html
 footer-html
</popup>

The dialog already has header and i can put content in the div. But, how can i add the footer html??

I want this footer to be there across all popups on the website.

Answer 1

Just separate out your current content container into a content and footer div:

<div class="dialogContent">
   <div class="content">Your existing content</div>
   <div class="footer">The common footer stuff</div>
</div>

Then put that within the content of the dialog.

Answer 2

What does your Html look like? I'd imagine something like this:

<div class="popup">
   <div class="header"></div>
   <div class="content"></div>
   <div class="footer"></div>
</div>

...and then the glib answer to your question is "the same way you put content into the header and content sections."

In JQuery it would be something like:

$(".footer").html("Hello World!");

Answer 3

here's how i do mine... it's not styled, but if you wanted to this is sorta how you could do it.

if you turn a layer with the class "mypopup" into a dialog, then you could do the following:

$('.mypopup').parent().append('<div id="footer" style="position:absolute;display:none;bottom:0;float:left;width:98%;background-color:#c9c9c9;padding:5px;"></div>');

that would make a "stuck" footer on the dialog, hopefully this will steer you in the right direction... although i do wish the dialog ui element had an actual "status bar" or "footer" area option.