如何使 jQuery Mobile 弹出窗口显示在设备的全屏中 [英] How to make a jQuery Mobile popup appear in full screen of device

问题描述

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

这是一个小提琴

代码如下:

HTML

<a href="#sql" id="opendialog" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="pop">打开对话框<div data-role="popup" id="sql" data-dismissible="false" style="max-width:100%"><div data-role="header" data-theme="a"><h1>删除页面?</h1>
<div role="main" class="ui-content"><h3 class="ui-title">您确定要删除此页面吗?</h3><p>此操作无法撤消.</p><a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">取消</a><a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">删除</a>

谢谢&问候

解决方案

• CSS 解决方案:

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

  .ui-popup-container, .ui-popup {高度:98%；宽度:100%；位置:绝对；顶部:0；左:0;}

• JS 解决方案:

  针对特定的弹出窗口.

  $(document).on("pagecreate", "#pageID", function () {$("#sql").popup({前位置:函数(){$(this).css({宽度:window.innerWidth，高度:window.innerHeight - 14});},x: 0,y:0});});

<块引用>

演示

I have been trying hard to make a popup appear in full screen in JQM but not able to do it

Here is a fiddle

And the code looks like this:

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>

Thanks & Regards

解决方案

• CSS solution:

  This will apply to any popup.

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

• JS solution:

  Target specific popup.

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

Demo

这篇关于如何使 jQuery Mobile 弹出窗口显示在设备的全屏中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！