JSFiddle - React, Tailwind, and code Playground

by anjibman

HTML

<!-- Main Page -->
<p><a href="" onCLick="return loadFirstBox(gold)">Gold</a></p>
<p><a href="" onCLick="return loadFirstBox(silver)">Silver</a></p>

<!-- First Modal Window -->
<div id="first-dialog-message" title="Color Box">
    <p>Opened
        <div id="holder"></div>
    </p>
    <p>Open <a href="" onCLick="return loadSecondBox()">prize</a>
    </p>
</div>

<!-- Second NonModal Window -->
<div id="second-dialog-message" title="Prize Box">
    <p>You won the prize</p>
</div>

CSS

body {
    font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif;
}
.ui-dialog-osx {
    -moz-border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    border-width: 0 8px 8px 8px;
}

JavaScript

function loadFirstBox(i) {
    $('#first-holder').empty().html(i);
    $("#first-dialog-message").dialog({
        modal: true,
        draggable: false,
        resizable: false,
        position: ['center', 'top'],
        show: 'blind',
        hide: 'blind',
        width: 400,
        dialogClass: 'ui-dialog-osx'
    });
    return false;
}

function loadFirstBox(i) {
    $('#second-holder').empty().html(i);
    $("#second-dialog-message").dialog({
        modal: true,
        draggable: false,
        resizable: false,
        position: ['center', 'top'],
        show: 'blind',
        hide: 'blind',
        width: 400,
        dialogClass: 'ui-dialog-osx'
    });
    return false;
}