JQuery 设置模态窗体
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery写的弹出窗口</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script type="text/javascript">$(function(){$("#btn").click(function(){$("#container").fadeIn(800);$("<div id='mask'></div>").appendTo("body");$("#mask").css("opacity","0.6");});$("#shut").click(function(){$("#mask").remove();$("#container").hide();});})</script><style type="text/css">html, body {width:100%;height:100%;}#container {width:400px;height:300px;border:20px #99CC00 ridge;text-align:center;display:none;position:absolute;left:50%;top:50%;margin-left:-200px;margin-top:-150px;z-index:10;background-color:#99CC00;}label, input {padding:5px;margin:5px;}ul,li{ list-style:none;}#mask {width:100%;height:100%;position:absolute;background-color:#000;left:0;top:0;z-index:8;}</style></head><body><p>JQuery写的一个弹出窗口</p><input type="button" id="btn" value="注册会员" /><div id="container"> <ul> <li>昵称： <input type="text" /> </li> <li>密码： <input type="text" /> </li> <li>确认： <input type="text" /> </li> <li>邮箱： <input type="text" /> </li> </ul> <label> <input type="submit" value="提交"/> <input type="reset" value="重设" /> </label> <input type="button" value="关闭弹出窗" id="shut" /></div></body></html>?