jquery 移动弹出窗口中的页脚未按预期运行

Question

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

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

这里是fiddlehttp://jsfiddle.net/stax/y9Lsqmax/2/

Answer 1

根据设计，footer 是 page 的父级，我坚信因为它可以容纳 navbar 或类似的导航系统，或者可能是 eyternal，而且可以使用 position: fixed 将其定位在屏幕的最底部。所以，恕我直言，它根本不应该放在 popup.

中

但是：您可以在 popup 中设置 div 的样式，就像 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");
});

jquery 移动弹出窗口中的页脚未按预期运行

Footer in jquery mobile popup not behaving as expected

jquery-mobile