如何使 jQuery Mobile 弹出窗口出现在设备的全屏中

Posted 2023-05-08

【中文标题】如何使 jQuery Mobile 弹出窗口出现在设备的全屏中

【英文标题】：How to make a jQuery Mobile popup appear in full screen of device

【发布时间】：2014-08-16 22:20:24

【问题描述】：

我一直在努力让弹出窗口在 JQM 中全屏显示，但无法做到

这是fiddle

代码如下所示：

HTML

<div data-role="page" id=""> <a href="#sql" id="opendialog" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="pop">Open Dialog</a>

    <div data-role="popup" id="sql" data-dismissible="false" style="max-width:100%">
        <div data-role="header" data-theme="a">
             <h1>Delete Page?</h1>

        </div>
        <div role="main" class="ui-content">
             <h3 class="ui-title">Are you sure you want to delete this page?</h3>

            <p>This action cannot be undone.</p> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
 <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a>

        </div>
    </div>
</div>

感谢和问候

【问题讨论】：

查看jsfiddle.net/N2UYZ/1

【参考方案1】：

CSS 解决方案：

这将适用于任何弹出窗口。

.ui-popup-container, .ui-popup 
    height: 98%;
    width: 100%;
    position: absolute;
    top: 0;
    left:0;

JS 解决方案：

目标特定的弹出窗口。

$(document).on("pagecreate", "#pageID", function () 
    $("#sql").popup(
        beforeposition: function () 
            $(this).css(
                width: window.innerWidth,
                height: window.innerHeight - 14
            );
        ,
        x: 0,
        y: 0
    );
);

Demo

【参考方案2】：

要避免弹出窗口默认 15px 的 jQuery 移动填充，并将弹出窗口宽度设置为 100%，同时不写入硬编码值，您可以执行以下操作：

HTML：

<div data-role="popup" id="sql" data-dismissible="false" data-tolerance="0"> 

CSS：

.ui-popup-container

    width: 100%;
    height: 100%;

JavaScript：

$(document).on("pagecreate", function (event, ui) 
    $("#sql").on("popupbeforeposition", popUpSql_OnBeforePosition);
);

function popUpSql_OnBeforePosition(event, ui) 
    var horizSpacing = 5;
    var vertSpacing = 5;
    var horizPaddingBorderSize = $(this).outerWidth() - $(this).width();
    var vertPaddingBorderSize = $(this).outerHeight() - $(this).height();

    $(this).css(
        left: horizSpacing,
        top: vertSpacing,
        width: window.innerWidth - (horizSpacing * 2) - horizPaddingBorderSize,
        height: window.innerHeight - (vertSpacing * 2) - vertPaddingBorderSize
    );

此代码还允许您更改弹出窗口的水平和垂直间距，让阴影边框可见。

JSFiddle

【参考方案3】：

此代码将新方法“setText”添加到 jquery 源中定义的小部件 mobile.popup。 使用它来更改弹出内容。弹出窗口将自动以窗口为中心

<div data-role="popup" id="popup-info"  data-theme="b" class="ui-content" >
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Fermer</a>
    <div id="content"></div>
</div>    

<script>
(function($) 
    $.widget( "mobile.popup", $.mobile.popup, 
        setText: function(_text) 
            container=this.element.find('div:first');
            if(container!==undefined)
                container.html(_text);
            else
                this.element.html(_text);
            
            var newX = parseInt(($(window).width()-this._ui.container.width())/2);      
            var newY = parseInt(($(window).height()-this._ui.container.height())/2);        
            this.reposition( x:newX,y:newY,positionTo:'window'  );
        
    );     
)(jQuery);

$('#popup-info').popup('setText',str);
</script>