前段时间想做一个直接再页面上做一个弹出框做修改和新增的功能,查了很多都是收费的,翻来覆去最后在runjs上找到了一个不错的效果,修一修就可以用了,感谢大牛的分享
HTML源码:
<!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> <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/55/sjckzedf/lanrenzhijia.css"> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/55/sjckzedf/jquery-1.8.0.min.js"></script><script> jQuery(document).ready(function($) { $('.theme-login').click(function(){ $('.theme-popover-mask').fadeIn(100); $('.theme-popover').slideDown(200); }) $('.theme-poptit .close').click(function(){ $('.theme-popover-mask').fadeOut(100); $('.theme-popover').slideUp(200); }) })</script> </head><body>
<div class="theme-buy"> <a class="btn btn-primary btn-large theme-login" href="javascript:;">点击查看效果</a> </div> <div class="theme-popover"> <div class="theme-poptit"> <a href="javascript:;" title="关闭" class="close">×</a> <h3>登录 是一种态度</h3> </div> <div class="theme-popbod dform"> <form class="theme-signin" name="loginform" action="" method="post"> <ol> <li><h4>你必须先登录!</h4></li> <li><strong>用户名:</strong><input class="ipt" type="text" name="log" value="lanrenzhijia" size="20" /></li> <li><strong>密码:</strong><input class="ipt" type="password" name="pwd" value="***" size="20" /></li> <li><input class="btn btn-primary" type="submit" name="submit" value=" 登 录 " /></li> </ol> </form> </div> </div> <div class="theme-popover-mask"></div></body></html>