自己用jquery写的弹出窗口

前一段时间写的是使用jquery解决ie6或者ie7不支持的伪类问题，现在基本上是告一段落了。今天我写的这个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解决ie6或者ie7不支持的伪类问题，现在基本上是告一段落了。今天我写的这个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>

提示：你可以先修改部分代码再运行。

这个效果其实还有一定的问题，比如我记得我以前见到的一个推出弹出框可以使用键盘的“Esc”键，但是这个我没有办法实现。您要是能实现的话你可以在这里留言来告诉我，这个效果用到的jquery主要是appentTo属性和remove属性。别的还有就是一些很常用的我们在前一些教程中已经做过讲解这里就不再赘述。

标签: jquery教程, 自己用jquery写的弹出窗口

发表于 jquery

0 comments 0 people listening

Comment help
Get Livefyre

Sort: Newest | Oldest

自己用jquery写的弹出窗口

站内搜索

热门文章

页面

最新评论

好站推荐

工具

常逛

标签

存档

功能