Floating Input Box

• Tweet
• 

        // description of your code here

<style type="text/css">
   
    
    #floating
    {
        position:fixed; 
        _position:absolute;
        top: 0;
        left:35%; 
        top:35%;
        padding:2px 10px;
        z-index: 5000;
        background-color:#e9e9e9;
        border:solid 1px #000000;
        color:#fff;
    }
    .floating-save
    {
        position:fixed; 
        _position:absolute;
        top: 0;
        left:48%; 
        top:48.5%;
        padding:2px 10px;
        z-index: 5000;
        
        color:#000;
    }
    #done
    {
        position:fixed; 
        _position:absolute;
        top: 0;
       left:47.5%; 
        top:48.5%;
        padding:2px 10px;
        z-index: 5000;
        background-color:#008be7;
        border:solid 1px white;
        color:#fff;
    }
    </style>
 <script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">

    $(document).ready(function() {

        

            $('<div id="floating" style="width:305px; height:165px; padding:5px;"><div style="padding: 0px 0px 27px;"><div style="float:left; color:#000000; font-weight:bold;">Prospectus Progress</div><div style="float:right"><img alt="save" height="20px" src="images/document-save.png" style="vertical-align:middle; color:#ffffff; cursor:pointer; font-weight:bold; " id="save" /> <img alt="close" height="20px" src="images/close.png" style="vertical-align:middle; color:#ffffff; cursor:pointer; font-weight:bold; " id="close" /></div></div><div id="container" ><textarea rows="7" id="txtarea" cols="35" >Enter comments...</textarea></div></div>').insertBefore('body').hide().show('fast');
            $("#close").click(function() {
                $(this).parent().parent().parent().remove();
                $(".floating-save").remove();
            });
            $("#save").click(function() {

                $("#txtarea").attr("disabled", "disabled");
                
                $('<img src="images/ajax-loader.gif" class="floating-save" />').insertAfter('#container');
                setTimeout(myfun, 2000);

            });
           
    });

    function myfun() {
        $(".floating-save").remove();

        $("<span id='done'>Saved</span>").insertBefore('#container').fadeOut(1200);
        setTimeout("$('#txtarea').attr('disabled', '');", 300);
        
    }

</script>

Tags:
• box
• floating
• Text