Modal window instead alert
<p>I need to modify this script so that at the end of the allowed number of characters, instead of alert user can see a modal warning window, which disappears after N seconds. In this case, the cursor should freeze in place and further typing is impossible.
Thanks in advance for your advice.</p>

<p>Here is my code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Textbox&lt;/title&gt;
&lt;script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function()
{
$("#contentbox").keyup(function()
{
var box=$(this).val();
var main = box.length *100;
var value= (main / 145);
var count= 145 - box.length;

if(box.length &lt;= 145)
{
$('#count').html(count);
$('#bar').animate(
{
"width": value+'%',
}, 1);
}
else
{
alert(' Stop! ');
}
return false;
});

});
&lt;/script&gt;
&lt;style&gt;
#barbox
{
float:right!; 
height:14px; 
background-color:#FFFFFF; 
width:100px; 
border:solid 2px #000; 
margin-right:3px;
margin-bottom:10px;
overflow: inherit;
}
#bar
{
background-color:#ff0000;
width:0px;
height:14px;
}
#count
{
float:right; margin-right:8px; 
font-family:'Georgia', Times New Roman, Times, serif; 
font-size:16px; 
font-weight:bold; 
color:#333;
}
#contentbox
{
width:450px; height:50px;
border:solid 2px #006699;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
&lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
&lt;div&gt;
&lt;div id="count"&gt;145&lt;/div&gt;
&lt;div id="barbox"&gt;&lt;div id="bar"&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;textarea id="contentbox"&gt;&lt;/textarea&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
