JSFiddle - React, Tailwind, and code Playground

by dima_k

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">
    <div data-role="header">
        <h1>Dialogs</h1>
    </div>
    <div data-role="content">
        <!-- data-rel -->
        <a href="#first-dialog" data-role="button" data-rel="dialog">First dialog</a>
        <a href="#second-dialog" data-role="button">Second dialog</a>
        <a href="#share-dialog" data-role="button" data-rel="dialog" data-transition="slidedown">Action sheet</a>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>Fotter</h1>
    </div>
</div>

<div data-role="page" id="first-dialog">
    <div data-role="header">
        <h1>First Dialog</h1>
    </div>
    <div data-role="content">
        <div class="centered-content">
            <h3>Do you like this pretty dialog? </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>
<!-- Configuring with data-role="dialog" -->
<div data-role="dialog" id="second-dialog" data-overlay-theme="e" data-theme="a">
    <div data-role="header">
        <h1>Second Dialog</h1>
    </div>

    <div data-role="content">
        <div class="centered-content">
            <h3>Do you like this pretty dialog? </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>

<!-- Create an action sheet by simply removing the header and adding little css -->
<div data-role="page" id="share-dialog">
    <style>
        #share-dialog.ui-dialog .ui-dialog-contain {
            margin-top: 0;
       ...

JavaScript

function closeDialog() {
    alert("Are you sure you didn't like it? :-)");
    //closing a dialog programmatically
    $('.ui-dialog').dialog('close');
    return false;
}