如何使jQuery手机弹出窗口在设备全屏显示

我一直在努力使一个弹出窗口在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>

删除页面？
是否确实要删除此页？
此操作无法撤消。

感谢和问候

• CSS解决方案：

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

  .ui-popup-container
  {
      width: 100%;
      height: 100%;
  }
  

  $(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
      });
  }
  

  这将适用于任何弹出窗口

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

• JS解决方案：

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

  .ui-popup-container
  {
      width: 100%;
      height: 100%;
  }
  

  $(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
      });
  }
  

  特定于目标的弹出窗口

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

---

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

HTML:

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

.ui-popup-container
{
    width: 100%;
    height: 100%;
}

$(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
    });
}

JavaScript:

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

.ui-popup-container
{
    width: 100%;
    height: 100%;
}

$(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
    });
}

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

---

此代码向jquery sources中定义的widget mobile.popup添加一个新方法“setText”。 使用它来更改弹出内容。弹出窗口将自动位于窗口的中心

<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>

（函数（$）{
$.widget（“mobile.popup”，$.mobile.popup{
setText:函数（_text）{
container=this.element.find（'div:first'）；
如果（容器！==未定义）{
html（_text）；
}否则{
this.element.html（_text）；
}
var newX=parseInt（（$（window.width（）-this.\u ui.container.width（））/2）；
var newY=parseInt（（$（window.height（）-this.\u ui.container.height（））/2）；
重新定位（{x:newX，y:newY，positionTo:'window'}）；
}
});     
})（jQuery）；
$（'popup info'）.popup（'setText'，str）；

检查此项