点击登录按钮弹出登录层(HTML+JS)

由于审美的需要,我们常常要实现点击某个特定的登陆按钮,然后弹出相应的登陆框。今天我也来分享一下……

本例子非常简单,说白了就是对JQuery的应用。就看你的熟练程度了。本例子只在追求相关功能的实现。界面布局神马的不在范围之内。

先看源码:



<body>
<div id="container">
  <div id="topnav" class="topnav">
  <a href="login" class="signin"><span>登录</span></a>
  </div>
  <fieldset id="signin_menu" style="display:none">
    <form method="post" id="signin" action="https://twitter.com/sessions">
      <label for="username">用户名</label>
      <input id="username" name="username" value="" title="username" tabindex="4" type="text">
      </p>
      <p>
        <label for="password">密码</label>
        <input id="password" name="password" value="" title="password" tabindex="5" type="password">
      </p>
      <p class="remember">
        <input id="signin_submit" value="Sign in" tabindex="6" type="submit">
        <input id="remember" name="remember_me" value="1" tabindex="7" type="checkbox">
        <label for="remember">记住密码</label>
      </p>
    </form>
  </fieldset>
</div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".signin").click(function(e){
e.preventDefault();
$("fieldset#signin_menu").toggle();

});
});
</script>
</body>

源码也很简单,没必要讲解一下。当然Jquery中还有很好的弹出窗口,其样式,布局,色调等等都是很完美的,我们直接可以应用。只有有待你我去发现了。。。。。

  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值