JSFiddle - React, Tailwind, and code Playground

by David Buzatto

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css">
<button id="btn1" type="button">Open Modal 1</button>
<button id="btn2" type="button">Open Modal 2</button>

JavaScript

$( "#btn1" ).click(function(){
    createModal({
        title: "Title!",
        message: "This is a Dialog!"
    });
});

$( "#btn2" ).click(function(){
    createModal({
        title: "Another Title!",
        message: "This is another Dialog!"
    });
});

function createModal( options ) {
    
    var $div = $( "<div></div>" );
    $div.append( $( "<p></p>" ).html( options.message ) );
    
    $div.dialog({
        modal: true,
        title: options.title,
        buttons: {
            "Foo": function() {
                $(this).dialog( "close" );
            },
            "Bar": function() {
                $(this).dialog( "close" );
            }
        },
        close: function( event, ui ) {
            // as the container was created on-the-fly
            // we need to do this to destroy the container
            $(this).dialog( "destroy" );
        }
    });
    
}