JSFiddle - React, Tailwind, and code Playground

by pmatseykanets

HTML

<div data-role="page" id="page1">
    <div data-role="content">

        <a id="btn1" href="#" data-role="button" data-transition="flip">Dynamic popup</a>
        <div data-role="popup" id="popup2" data-overlay-theme="e">
        </div>

    </div>
</div>

JavaScript

$("#btn1").click(function () {
    $.mobile.loading('show', {
        theme: "e",
        text: "Loading the content...",
        textonly: true,
        textVisible: true
    });
    setTimeout(function () {
        $("#popup2").html("<h1>Header</h1><p>This is the popup's message.</p>").popup("open");
    }, 2000);
});
$("#popup2").on("popupafteropen", function (event, ui) {
    $.mobile.loading('hide');
});