jQuery移动弹出窗口未在中心显示

Question

我正在使用jQuery移动端，并尝试在页面加载时显示jQuery弹出框，但是当页面加载时，弹出框不会出现在中心，而是出现在左上角。

但是一旦浏览器窗口大小改变，弹出框会自动移动到中心（即使我按F12打开开发者工具）。然后所有频繁调用$('#popupBasic').popup("open");的操作都会使其出现在屏幕中央。

但是第一次，弹出框顶部左侧角落会出现在中心。

- A dev

---

我遇到了类似的问题。有时它会像你上面说的那样出现，但大多数情况下弹出窗口甚至不可见（尽管它在那里 - 我可以通过检查DOM看到）。不确定解决方案是什么。 - Samik R

你也遇到了1.3.0版本的同样问题。使用的是最新版的Chrome浏览器。你找到解决方法了吗？ - Dave

Answer 1

请尝试使用此代码：data-position-to="window"。

这是源代码

- bokkie

Answer 2

你可以尝试在页面显示时重新定位弹出窗口：

$( '#popupLogin' ).popup( 'reposition', 'positionTo: window' );

我认为你所遇到的问题是因为在页面完全被浏览器绘制之前发生了位置定位。你可以通过以下方式重新调整弹出窗口的位置来解决这个问题：

$(document).on('pageshow', '.selector', function(){
  $('#popupBasic').popup('reposition', 'positionTo: window');
});

- Luigi

---

我使用一个弹出式div，根据用户的选择来显示不同的图像。这些图像的大小在加载之前是未知的。在成功将图像加载到弹出窗口后调用$( '#popupLogin' ).popup( 'reposition', 'positionTo: window' );可以使弹出窗口居中显示。 - dsdsdsdsd

Answer 3

$(document).on("popupafteropen", function() {
    $('#popup').popup('reposition', 'positionTo: window');
});

您可以使用自定义弹出事件，在打开后重新定位它。

- sidonaldson

Answer 4

我遇到了相同的错误。在页面绘制完成后再显示弹窗。

监听 pageshow 事件而不是 pageinit 事件，可能会解决你的问题。这样做对我有用。

- Russ Van Bert

Answer 5

这是一个非常模糊的问题。

您应该提供以下几点：

• 您正在测试哪个浏览器以及它的版本？
• JQM 的哪个版本？
• 是否有任何自定义 CSS 与 JQM 交互？

截至 JQM 1.2，弹出选项可用：

默认值："origin"

设置弹出窗口相对于其居中的元素。它具有以下值：

"origin" 当弹出窗口打开时，在传递给 open() 调用的坐标上居中（请参阅方法页面）。

"window" 当弹出窗口打开时，在窗口中心。

jQuery 选择器 当弹出窗口打开时，基于选择器创建一个 jQuery 对象，并在其上居中。选择器被过滤为使用“:visible”可见的元素。如果结果为空，则弹出窗口将在窗口中心。

来源

- JerryHuang.me

---

它几乎出现在我尝试过的所有地方： Chrome版本24.0.1312.32 beta-m Firefox 16.0.1 HTC Wildfire 2.2.1JQM jquery.mobile-1.2.0.min.js没有自定义CSS与JQM我尝试了所有的弹出选项，但仍然没有成功。您可以尝试复制此内容： <div data-role="popup" id="popupBasic" data-theme="a" data-corners="false" data-history="false" data-transition="flow" class="ui-content">SOME LONG CONTENT</div>然后执行以下操作： $(document).bind('pageinit', function({ $('#popupBasic').popup("open"); }); - A dev

Answer 6

当我手动设置弹出窗口div的宽度时，它对我有效；尝试：

$("#popupBasic").css("width","200px");

- user12967675