JSFiddle - React, Tailwind, and code Playground

by sumanthreddy

HTML

<div id="rolling" style="display: none;">
	<table>
    	<tr><td>image</td></tr>
	    <tr><td>Waiting..</td></tr>
	</table>
	<div class="buttonDiv">
		<button type="submit" id="cancel" onclick="javascript:cancel();">Cancel</button>
	</div>
</div>
<div style="padding-top:15px;">
    <button type="submit" id="Send to device" onclick="javascript:initializeDevice()">  Send to device</button>
</div>

CSS

.buttonDiv
{
	line-height: normal;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-align: right;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
	padding-left: 0px;
    clear: both;
    border-top-color: #2ba1b5;
    border-bottom-color: #2ba1b5;
    border-left-color: #2ba1b5;
    border-right-color: #2ba1b5;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    background-color: rgb(231,238,249);
	width: 372px;
	height: 30px;
}
#dialog_footer {
    height: 14px;
}
.no-close .ui-dialog-titlebar-close {
	display: none;
}
.no-close .ui-dialog-titlebar {
	background-image: url(../common/images/hdr/home_blue_subhdr.gif);
	color: #fff;
	display: block;
	font-family: Arial,Helvetica,sans-serif;
}

JavaScript

function initializeDevice()
{
        document.getElementById('rolling').style.display = 'block';
        var footer = '<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" id="dialog_footer"></div>';
        jQuery("#rolling").dialog({
        	title: 'Information', position: ['center','center'], height: 204, width: 400, modal:true, dialogClass: "no-close",
        	create: function() {
     		   jQuery(".no-close").append(footer);
     	    }
        });
    	jQuery("#rolling").dialog('open');
}
function cancel()
{
    	jQuery('#rolling').dialog('close');     	
}