JSFiddle - React, Tailwind, and code Playground

by Rosberg Linhares

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://demos.jquerymobile.com/1.4.2/js/jquery.mobile-1.4.2.js"></script>
<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" data-tolerance="0, 0, 0, 0">
        <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

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

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