Q:

Footer in jquery mobile popup not behaving as expected

I'm trying to dynamically add an external popup with a title and a footer, with jquery mobile, but the footer moves to the page instead of staying in the popup div ...
Is it a bug from a jquery mobile? How can I solve it?
 var p=$("<div />").appendTo(document.body);
 $("<div />").attr("data-role", "header").appendTo(p).html("<h1>title</h1>");
 $("<div />").addClass("ui-content").text("content").appendTo(p);
 $("<div />").attr("data-role", "footer").appendTo(p).html("<h1>footer</h1>");
 p.enhanceWithin().popup({"positionTo":"window", "theme":"a"});
 p.popup("open");

here is the fiddle  http://jsfiddle.net/stax/y9Lsqmax/2/

A:

By design, the footer is parented with the page, I strongly believe because it can accommodate a navbar or a similar navigation system, or may be eyternal, and moreover it can be positioned at the very bottom of the screen, by using position: fixed. So, IMHO, it is simply not meant to be placed inside a popup.
BUT: You can style a div inside the popup as it looks as footer. Of course, it won't support all the options documented here: jQuery Mobile Toolbar .
$(document).on("pagecreate", "#page1", function () {
  var p = $('<div id="popup"/>').appendTo(document.body);
  $('<div class="ui-header ui-bar-inherit"/>').html('<h4 class="ui-title">Title</h4>').appendTo(p);
  $('<div class="ui-content"/>').text("content").appendTo(p);
  $('<div class="ui-footer ui-bar-inherit"/>').html('<h4 class="ui-title">Popup footer</h4>').appendTo(p);
  p.popup({"positionTo":"window", "theme":"a", "overlayTheme":"a"});

  $("#popup").popup("open");
});

