JSFiddle - React, Tailwind, and code Playground

by robert_schutt

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <div id="dialogWrapper"></div>
    The quick brown fox jumps over the lazy dog.
    <div id="dialog">
        <p>Do you want to stay on this page?</p>
    </div>
    <br/>

CSS

#dialogWrapper {
        position: fixed;
        width: 100vw;
        /* relative unit that takes up full width */
        height: 100vh;
        /* relative unit that takes up full height */
        background-color: rgba(0, 0, 0, 0.8);
        /* adjust last value as needed */
        z-index: 1;
        /* makes this stay on top of all other elements that are not position: static */
    }

JavaScript

$(function() {
        $("#dialog").dialog({
            autoOpen: false,
            title: "My Dialog",
            open: function() {
                $("#dialogWrapper").show();
            },
            close: function() {
                $("#dialogWrapper").hide();
            },
            buttons: [{
                text: "Yes",
                click: function() {
                    $(this).dialog("close");
                }
            }, {
                text: "No",
                click: function() {
                    $(this).dialog("close");
                    window.location = "http://www.yahoo.com";
                }
            }]
        });
       
        //$("#dialogWrapper").show();
        $("#dialog").dialog("open");
    });