JSFiddle - React, Tailwind, and code Playground

by Sayantan Das

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div data-role="page" id="popup-demo">
    <div data-role="header">
        <h1>Popups</h1>
    </div>
    <div data-role="content">
        <!-- data-rel -->
        <a href="#first-popup" data-role="button" data-rel="popup">First popup</a>
        <a href="#sign-in" data-role="button" data-rel="popup">Sign in popup</a>
        <a href="#image-popup" data-role="button" data-rel="popup" data-transition="flip">Image popup</a>
        <a href="#positioned-popup" data-role="button" data-rel="popup" data-transition="flip">Positioned popup</a>
        <a href="#popup-with-events" data-role="button" data-rel="popup" data-transition="flip">Popup with events</a>
        <p>You can use it as a <a href="#tooltip-popup" data-rel="popup" data-transition="pop">tooltip</a><span id="tooltip" style="padding-left: 200px;"></span></p>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>Fotter</h1>
    </div>


    <!-- First popup -->
    <!-- Screen and popup containers -->
    <div data-role="popup" id="first-popup">
        <div data-role="header">
            <h1>First Popup</h1>
        </div>
        <div data-role="content">
            <div class="centered-content">
                <h3>Looks like a dialog, no? </h3>
                <br />
                <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="a">Oh, yes</a>
                <a href="#" data-role="button" data-inline="true" onclick="closeDialog()">No at all</a>
            </div>
        </div>
    </div>

    <!-- Second popup -->
    <!-- Theming with data-theme and data-overlay-theme -->
    <div data-role="popup" id="sign-in" data-theme="a" data-overlay-theme="a">
        <div data-role="content">
            <div class="centered-content">
                <h3>Please sign in</h3>
   ...

JavaScript

function closeDialog() {
    //closing a popup programmatically
    alert('Closing...');
    $('#first-popup').popup('close');
    return false;
}


$( document ).delegate("#popup-demo", "pageinit", function() {
    $("#popup-with-events").on({
        popupbeforeposition: function () {
            alert('This happens before the popup is positioned');
        },
        popupafteropen: function () {
            alert('This happens after the popup is opened');
        },
        popupafterclose: function () {
            alert('This happens after the popup is closed');
        }
    });
});