jQuery移动弹出窗口中的行为不符合预期

Question

我正在尝试使用jquery mobile动态添加带有标题和页脚的外部弹出窗口，但是页脚移至页面，而不是停留在弹出div中...这是来自jQuery Mobile的错误吗？我该如何解决？

 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");

这里是小提琴http://jsfiddle.net/stax/y9Lsqmax/2/

Answer 1

[根据设计，footer是page的父代，我坚信，因为它可以容纳navbar或类似的导航系统，或者可能是eyternal，而且可以将其放置在通过使用position: fixed在屏幕底部。因此，恕我直言，它根本不是要放在popup内。

但是：您可以为div内部的popup样式设置为footer。当然，它不支持此处记录的所有选项：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");
});