JSFiddle - React, Tailwind, and code Playground

by prabhavithreddy

HTML

<input type="button" id="btnClick" value="Custom Alert" />
    <input type="button" id="btnAlertClick" value="JavaScript Alert" />
    <div id="divWindow">
        <table style="width:100%">
            <tr>
                <td colspan="2"  style="border-bottom:thin solid gray">
                    <img id="imgClose" src="Close.jpg" width="20px" height="20px" align="right" />                    
                </td>
            </tr>            
            <tr>
                <td colspan="2">
                    <p>
                        This is an alert message from the Web Site Please Check your User Name and Password.</p>
                </td>
            </tr>
            <tr>
                <td align="right" style="width:50%">
                    <input id="btnOk" type="button" value="ok" style="width:60px" />
                </td>
                <td align="left">
                    <input id="btnCancel" type="button" value="Cancel" />
                </td>
            </tr>
        </table>
    </div>

CSS

#divWindow
{
    width:0px;
    height:100%;
    border:thick solid gray;
    position:relative;
    top:100px;
    left:300px;
    visibility:hidden;
    z-index:99;
}
table
{
    visibility:hidden;
}

JavaScript

var count=0;
        $(document).ready(function () {
             $("#btnClick").click(function () {
             if(count==0)
             {
                $("#divWindow").css("visibility","visible");
                $("#divWindow").animate(
                {
                    width:'400px',                    
                    left:'-=200px'                  
                }, "fast",function (){
                    $("table").css("visibility","visible");
                });
              }
              count=1;
            });
            $("#btnCancel,#imgClose").click(function(){
                $("#divWindow").css("visibility","hidden");
                $("#divWindow").css("width","0px");
                $("#divWindow").css("left","300px");
                $("table").css("visibility","hidden");
                count=0;
            });
            $("#btnAlertClick").click(function(){
                window.alert("This is an alert message from the Web Site Please Check your User Name and Password.");
            });
        });