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

标签 jquery html jquery-mobile

我一直在努力在 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>

感谢和问候

最佳答案

  • 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

关于jquery - 如何使 jQuery Mobile 弹出窗口出现在设备的全屏中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24424160/

相关文章:

javascript - 在 Bootstrap 可折叠侧边栏导航中添加 Cookie

jquery mobile - 如何使用 "error reporting dialog"

javascript - 无法使用后退按钮到嵌套列表(最新版本)

jquery - 如何仅在与特定情况匹配时才在下拉列表后显示加号

javascript - 使用 Javascript 为 phonegap 应用程序推送通知?

javascript - 当我使用 JQuery 切换时,脚本只最小化迭代器中的第一个值?

php - 用字符串中的完整图像标签替换图像 src

jQuery 移动应用程序

javascript - jQuery UI 类名

javascript - 使用jquery延迟图像加载