模態窗口，而不是警告

我需要修改這個腳本，而不是警告用戶，以便在字符的允許次數結束時，可以看到一個模態警告窗口，其中N秒後消失。在這種情況下，光標應該凍結到位，並且進一步打字是不可能的。在此先感謝您的建議。模態窗口，而不是警告

這裏是我的代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Textbox</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ 
ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(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 <= 145) 
{ 
$('#count').html(count); 
$('#bar').animate(
{ 
"width": value+'%', 
}, 1); 
} 
else 
{ 
alert(' Stop! '); 
} 
return false; 
}); 

}); 
</script> 
<style> 
#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; 
} 
</style> 
    </head> 
    <body> 
<div> 
<div id="count">145</div> 
<div id="barbox"><div id="bar"></div></div> 
</div> 
<textarea id="contentbox"></textarea> 
    </body> 
</html>

來源

2012-07-13 w00t

'。。 } 其他 { 警報（ '站住！'）; $（「＃contentbox」）。attr（「disabled」，「true」）; } ...' – 2012-07-13 21:16:25

你可以使用jQuery庫創建一個模式對話框： http://jqueryui.com/demos/dialog/#modal

下面是一個使用你的代碼的例子：http://jsfiddle.net/ZZsTS/

$("#dialog-modal").dialog({ 
    height: 140, 
    modal: true, 
    autoOpen: false, 
    //set a timeout of 3 secs to close it again, when opened 
    open: function(event, ui) { 
    setTimeout("$('#dialog-modal').dialog('close')", 3000); 
    }, 
    //when closing, make the textarea readonly 
    close : function(){ 
    $('textarea').attr('readonly', 'readonly'); 
    } 
});

打開對話框，

$('#dialog-modal').dialog('open');

HTML

<textarea></textarea> 

<div id="dialog-modal" title="Basic modal dialog"> 
    <p>Stop !</p> 
</div>

來源

2012-07-13 21:16:10

謝謝。這對我來說真的很有幫助。 – w00t 2012-07-15 10:39:57

不客氣:) – 2012-07-15 10:41:35

模態窗口，而不是警告

回答

相關問題