How To Make A Jquery Mobile Popup Appear In Full Screen Of Device

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

&

Solution 1:

• 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

Solution 2:

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:

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

functionpopUpSql_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

Solution 3:

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

<divdata-role="popup"id="popup-info"data-theme="b"class="ui-content" ><ahref="#"data-rel="back"data-role="button"data-theme="a"data-icon="delete"data-iconpos="notext"class="ui-btn-left">Fermer</a><divid="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>

Share