jQuery mobile popup width issue

Question

如何以％设置弹出窗口的宽度？我试图给宽度：弹出div的80％。它在桌面浏览器中工作正常，但在移动浏览器中会自动压缩。

这里是标记：

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

这里是屏幕截图：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS8xWkFmQy5wbmcifQ==” alt =“在此处输入图像描述”>

Answer 1

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

当更改jQuery Mobile CSS时，需要特别小心，特别是在使用百分比时。仅在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事件中执行它[[必须。此解决方案也适用于移动设备。

最后一件事，如果要居中，请在弹出窗口

中使用

data-position-to =“ window”属性。

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解决初始请求或所需的任何百分比，但切勿使用更高的百分比。