JSFiddle - React, Tailwind, and code Playground

by Asif Sharif Shahid

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<body>
    <input type="button" id ="btnTest" value="Test"/>
        <div id="dialog" title="Alert message" style="display: none">
            <div class="ui-dialog-content ui-widget-content">
                <p>
                    <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0"></span>
                    <label id="lblMessage">
                    </label>
                </p>
            </div>
        </div>
</body>

CSS

.showcss{ display:block;}
  .hidecss{ display:none;}

JavaScript

$(document).ready(function(){
                  $('#btnTest').click(function(){
ShowCustomDialog();
});
                  });


			function ShowCustomDialog()
			{
                
			ShowDialogBox('Warning','Record updated successfully.','Ok','', 'GoToAssetList',null);
			}

            function ShowDialogBox(title, content, btn1text, btn2text, functionText, parameterList) {
                var btn1css;
                var btn2css;

                if (btn1text == '') {
                    btn1css = "hidecss";
                } else {
                    btn1css = "showcss";
                }

                if (btn2text == '') {
                    btn2css = "hidecss";
                } else {
                    btn2css = "showcss";
                }
                $("#lblMessage").html(content);

                $("#dialog").dialog({
                    resizable: false,
                    title: title,
                    modal: true,
                    width: '400px',
                    height: 'auto',
                    bgiframe: false,
                    hide: { effect: 'scale', duration: 400 },

                    buttons: [
                                    {
                                        text: btn1text,
                                        "class": btn1css,
                                        click: function () {
                                                                                    
                                            $("#dialog").dialog('close');

                                        }
                                    },
                                    {
                                        text: btn2text,
                                        "class": btn2css,
                                        click: function () {
                                            $("#dialog").dialog('close');
                                        }
                                    }
                ...