Question

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

代码就像这样

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>

谢谢＆amp;问候

Answer 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

Answer 2

要避免弹出窗口的默认jQuery移动填充为15px，并将弹出窗口宽度设置为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

Answer 3

此代码将新方法'setText'添加到jquery源中定义的widget mobile.popup。用它来更改弹出内容。弹出窗口将自动居中于窗口

"kind": "drive#file",
 "id": "0yUN_7RUIxZyVkYtUOeW9wbGc",
 "name": "ITcom presentation - CNR Debrecen.pptx",
 "mimeType": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
 "starred": false,
 "trashed": false,
 "explicitlyTrashed": false,
 "version": "135323",
 "webContentLink": "https://docs.google.com/uc?id=0yUN_7RUIxZyVkYtUOeW9wbGc&export=download",
 "webViewLink": "https://drive.google.com/file/d/0yUN_7RUIxZyVkYtUOeW9wbGc/view?usp=drivesdk",
 "iconLink": "https://ssl.gstatic.com/docs/doclist/images/icon_10_powerpoint_list.png",
 "thumbnailLink": "https://lh5.googleusercontent.com/p0LUsafMy3_Q7reWZ6jMnRGrQ51em7i9vWvgKp2jTkUdPQ8Ks9-S4bs6sk8DeZBFpqVYAw=s220",
 "viewedByMe": true,
 "viewedByMeTime": "2015-02-04T21:47:00.564Z",
 "createdTime": "2015-02-04T21:46:57.813Z",
 "modifiedTime": "2015-02-04T21:46:57.813Z",
 "modifiedByMeTime": "2015-02-04T21:46:57.813Z",
 "shared": true,
 "ownedByMe": true,
 "viewersCanCopyContent": true,
 "writersCanShare": true,
 "originalFilename": "ITcom presentation - CNR Debrecen.pptx",
 "fullFileExtension": "pptx",
 "fileExtension": "pptx",
 "md5Checksum": "7a7977f8620e7f02f533f98254ae824b",
 "size": "1835994",
 "quotaBytesUsed": "1835994",
 "headRevisionId": "0yUN_7RUIxZyamN4bEp2WDlqNm4vUmR3YUdCdDVBb0Q3MDdnPQ",
 "isAppAuthorized": false
}

如何使Jquery移动弹出窗口出现在设备的全屏幕中

3 个答案: