<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.111cn.net/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> jquery pop-up announcement </title>
<Script type = "text/javascript tutorial" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script> <style>
* {Margin: 0; padding: 0; font-size: 12px ;}
Li {float: left; width: 100px; border: 1px solid # ccc; list-style: none; text-align: center ;}
H3 {margin: 20px auto; text-align: center ;}
Input {width: 120px; height: 30px; cursor: pointer ;}
# Notice {position: absolute; width: 400px; padding: 20px; background: # eee; border: 1px solid # ccc; left: 10px; top: 10px; display: none ;}
</Style>
<Script>
$ (Function (){
$ ('# Open'). click (function (){
$ ('# Notice'). slideDown ();
$ ('# Texta'). val ('preferences '). select ();
});
$ ('# Closed'). click (function (){
$ ('# Notice'). slideUp ();
});
});
</Script> <Body>
<H3>
<Input id = "open" type = "button" value = "pop-up announcement"/>
<Input id = "closed" type = "button" value = "Close announcement"/>
</H3>
<Div id = "notice">
<Textarea name = "" id = "texta" cols = "30" rows = "10">
</Div>
</Body>
</Html>