jquery弹出展开登陆窗口html代码

把下载的文件放在网站根目录,在head区域引入样式表文件。

效果图:jquery弹出展开登陆窗口html代码 网站源码 第1张

调用代码:

<link rel="stylesheet" href="css/css.css" media="all">
<script src="js/jquery.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>登录 家利宇宙 www.liecnk.com</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="家利宇宙" size="20" /></li>
<li><strong>密码:</strong><input class="ipt" type="password" name="pwd" value="www.liecnk.com" 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>
特别声明:本站的大部分资源多为来自网络,如有资源侵权你的合法利益请联系admin@liecnk.com删除!
利熙博客 » jquery弹出展开登陆窗口html代码

发表评论

有问题需要联系站长吗

立即联系 进交流群