jQuery移动弹出宽度问题

Question

如何在％中设置弹出窗口的宽度？我试过给出宽度：80％的弹出div。它在桌面浏览器中运行良好，但在移动浏览器中它会自动消失。

这是标记：

<div data-role="popup" style="width:80%;left:auto !important;right:0 !important;" id="help-dialog" data-overlay-theme="a" data-theme="a"   data-dismissible="false" data-transition="none">

这是截图：

Answer 1

工作示例：http://jsfiddle.net/vds2U/61/

更改jQuery Mobile CSS时，您需要小心，特别是在使用百分比时。只有在 pageshow 事件期间，我们才能计算出正确的页面维度，事实上只有在此时我们才能将百分比值设置为内页面内容。

移动设备的问题在于它们的迟缓，触发pageshow事件需要时间。

因此，最好的行动方案需要以编程方式解决：

HTML：

一些虚拟弹出窗口：

<div data-role="popup"id="help-dialog" data-overlay-theme="a" data-theme="a" data-dismissible="false" data-transition="none" data-position-to="window">
    <div data-role="header" data-theme="a" class="ui-corner-top">
        <h1>Popup</h1>

    </div>
    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
        <h3 class="ui-title">Focused Field</h3>

        <p>
            <input type="text" id="popup_input" />
        </p> <a href="#" data-role="button"data-rel="back">Close</a>

    </div>                    
</div>  

的JavaScript：

$(document).on('pageshow', '#index', function(){ 
    var content_width = $.mobile.activePage.find("div[data-role='content']:visible:visible").outerWidth();
    $('#help-dialog').css({'width':content_width*0.8});
});

要使此解决方案正常工作，必须必须在 pageshow 事件期间执行必须。此解决方案也适用于移动设备。

最后一件事，在弹出窗口＆lt; div＆gt;中使用 data-position-to =＆＃34; window＆＃34; 属性如果你想让它居中。

Answer 2

无需更改jQuery Mobile CSS，您只需覆盖它即可。

导致问题的是jQuery mobile会自动将弹出式div放入容器中。如果要更改弹出窗口div的宽度，则需要定位其容器的宽度。

来自jQuery Mobile文档：

  

弹出窗口包含两个元素：屏幕（...）和容器，它是弹出窗口本身。如果您的原始元素具有id属性，则屏幕和容器将根据它分别接收id属性。屏幕的ID后缀为“-screen”，，容器的ID后缀为“-popup”。

在你的情况下，给予

#help-dialog-popup {
    width: 80%;
    left: auto;
    right: 0;
}

应该做的伎俩。

Answer 3

我知道这是一篇旧文章，但是我现在遇到了同样的问题。为了创建在移动设备上看起来完美但对于计算机屏幕来说不太大的弹出窗口，我使用下面的类似dialog-medium的类。这样，您可以强制外部容器调整大小并计算屏幕上的正确位置。您可以使用80vw来解决初始请求或所需的任何百分比，但绝不要使用更高的百分比。

.dialog-medium {
    width:90vw;
    max-width:35em;
}

Answer 4

使用浏览器检查工具（例如，右键单击-> Inspect元素），您将找到弹出窗口使用的类。 data-role =“ popup” 通常使用 .ui-popup-container 。

因此，您将类似于以下内容的内容添加到页面的样式标签中。

.ui-popup-container {
    height: 90vh;
    width: 90vw;
    }

在上面的示例中，弹出窗口将为视口大小的90％。假设您已经编写了标签。

如果要在台式机和移动设备上使用不同的大小（应该），请使用以下命令：

@media screen and (max-width: 1000px) {
.ui-popup-container {
    height: 90vh;
    width: 90vw;
    }
}
@media screen and (min-width: 1001px) {
.ui-popup-container {
    height: 60vh;
    width: 60vw;
    }
}

在上面的示例中，弹出窗口将是移动屏幕（小于1001像素宽度）上视口大小的90％，在大屏幕（计算机）上为视口大小的60％