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

How to make a Jquery mobile popup appear in full screen of device

提问by Vikram Anand Bhushan

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

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

Here is a fiddle

这是一个小提琴

And the code is like this

代码是这样的

HTML

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

感谢和问候

回答by Omar

• 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
      });
  });
  

• 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

演示

回答by Rosberg Linhares

To avoid the default jQuery mobile padding of 15px for popups, and set the popup width to 100%, while not writing hard-coded values, you can do the following:

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

HTML:

HTML：

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

CSS:

CSS：

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

JavaScript:

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

This code also allows you to change the horizontal and vertical spacing of the popup, letting the shadow border visible.

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

JSFiddle

JSFiddle

回答by Florent Renier

This code add a new method 'setText' to the widget mobile.popup defined in jquery sources. Use it to change the popup content. The popup will be centered on window automatically

此代码向 jquery 源中定义的小部件 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>