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事件期间,我们才能计算出正确的页面尺寸,事实上只有在这一点上我们才能将百分比值设置为内页面内容.

移动设备的问题在于它们的迟缓,浏览页面事件需要时间.

所以最好的行动方案需要以编程方式解决:

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"属性.