Vikram Vikram - 6 months ago 316
jQuery Question

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

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

Comments