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

i have been trying hard make popup appear in full screen in jqm not able

here fiddle

and code

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 sure want delete page?</h3>              <p>this action cannot 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 apply 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