JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
<div data-role="page">
    <div data-role="header">
         <h1>Popup positioning</h1>

    </div>
    <div data-role="content">
<a data-mini="true" data-role="button" data-rel="popup" data-icon="gear">Test popup</a>

    </div>
    <!-- popups -->
    <div id="test" data-role="popup">
        <p>I'm a little Popup.</p>
    </div>
</div>

JavaScript

$("a").on("click", function (e) {
    $("#test").popup("open", {
        x: 50,
        y: 100
    });
});

// override x & y values set before

$("#test").on("popupafteropen", function (e, ui) {
    var pop = $(this);
    setTimeout(function () {
        pop.popup("reposition", {
            y: 400,
            x: 250
        });
    }, 1000);
});