jQuery移动弹出窗口宽度问题

Nitin Kabra 发表于 Dev

尼丁·卡布拉

如何以％设置弹出窗口的宽度？我试过给出width：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">

这是截图：

在此处输入图片说明

Gajotres

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

更改jQuery Mobile CSS时，需要特别小心，特别是在使用百分比时。仅在页面显示事件期间，我们才能计算出正确的页面尺寸，事实上，只有在这一点上，我们才能为内部页面内容设置百分比值。

移动设备的问题在于它们的呆滞，触发页面显示事件需要时间。

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

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事件期间执行它。该解决方案也适用于移动设备。

最后一件事，如果要使其居中，请在弹出窗口<div>中使用data-position-to =“ window”属性。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。