JSFiddle - React, Tailwind, and code Playground

by antishok

HTML

<div id="dialog" title="Dialog1 Title">Dialog1</div>

<div id="dialog2" title="ONS outage verification">Check ONS. Is the customer in an area where there is an outage?</div>

CSS

.ui-dialog-titlebar-close {
    visibility: hidden;
}
.dialog1 .ui-dialog-titlebar-close {
    visibility: visible;
}

JavaScript

initDialogs();

function initDialogs() {
    
    $('#dialog').dialog({
        buttons: {
            'Continue': function () { // Button 'Ok'
                $(this).dialog('close');
                $('#dialog2').dialog('open');
            }
        },
        dialogClass: 'dialog1',
        show: 'fade',
        modal: true,
        closeOnEscape: true,
        position: [500, 'middle']
    });

    
    $('#dialog2').dialog({
        autoOpen: false,
        buttons: {
            'YES': function () {
                $(this).dialog('close');

            },
                'No': function () {
                $(this).dialog('close');
            },
                'Back': function () {
                $(this).dialog('close');
            }
        },
        // dialog settings 
        show: 'fade',
        modal: true,
        closeOnEscape: false
    });
    
}