jquery实现弹出层登录和全屏层注册特效

jquery实现的弹出层登录和无刷新切换全屏层注册特效源码,是一段非常适合现代审美观的网站登录和注册效果代码,本段实例主要表现在点击登录后在当前页面内弹出登录遮罩层,而点击注册链接时,在当前页面内无刷新显示全屏注册层效果,是一款非常实用的特效代码,值得大家学习。
运行效果图:

-------------------查看效果 下载源码-------------------

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。

为大家分享的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>
<meta name="description" content="jquery弹出层登录和无刷新切换全屏层注册特效" />
<meta name="keywords" content="jquery弹出层登录和无刷新切换全屏层注册特效" />

<link rel="stylesheet" type="text/css" href="css/style.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var k=!0;

 $(".loginmask").css("opacity",0.8);

 if($.browser.version <= 6){
 $('#reg_setp,.loginmask').height($(document).height());
 }

 $(".thirdlogin ul li:odd").css({marginRight:0}); 

 $(".openlogin").click(function(){
 k&&"0px"!=$("#loginalert").css("top")&& ($("#loginalert").show(),$(".loginmask").fadeIn(500),$("#loginalert").animate({top:0},400,"easeOutQuart"))
 });

 $(".loginmask,.closealert").click(function(){
 k&&(k=!1,$("#loginalert").animate({top:-600},400,"easeOutQuart",function(){$("#loginalert").hide();k=!0}),$(".loginmask").fadeOut(500))
 });

 $("#sigup_now,.reg a").click(function(){
 $("#reg_setp,#setp_quicklogin").show();
 $("#reg_setp").animate({left:0},500,"easeOutQuart")
 });
 $(".back_setp").click(function(){
 "block"==$("#setp_quicklogin").css("display")&&$("#reg_setp").animate({left:"100%"},500,"easeOutQuart",function(){$("#reg_setp,#setp_quicklogin").hide()})
 });

});
</script>

</head>
<body>

<div id="header">
 <ul class="login fr">
 <li class="openlogin"><a href="javascript:void(0);">登录</a></li>
 <li class="reg"><a href="javascript:void(0);">注册</a></li>
 </ul>
</div>

<div class="loginmask"></div>

<div id="loginalert">

 <div class="pd20 loginpd">
 <h3><i class="closealert fr"></i><div class="clear"></div></h3>
 <div class="loginwrap">
 <div class="loginh">
 <div class="fl">会员登录</div>
 <div class="fr">还没有账号<a id="sigup_now" href="javascript:void(0);">立即注册</a></div>
 </div>
 <h3><span class="fl">邮箱登录</span><span class="login_warning" style="display:none">用户名或密码错误</span><div class="clear"></div></h3>
 <form action="" method="post" id="login_form">
 <div class="logininput">
  <input type="text" name="username" class="loginusername" value="" placeholder="邮箱/用户名" />
  <input type="text" class="loginuserpasswordt" value="" placeholder="密码" />
  <input type="password" name="password" class="loginuserpasswordp" style="display:none" />
 </div>
 <div class="loginbtn">
  <div class="loginsubmit fl"><input type="submit" value="登录" class="btn" /></div>
  <div class="fl" style="margin:26px 0 0 0;"><input id="bcdl" type="checkbox" checked="true" />保持登录</div>
  <div class="fr" style="margin:26px 0 0 0;"><a href="//www.jb51.net/">忘记密码?</a></div>
  <div class="clear"></div>
 </div>
 </form>
 </div>
 </div>

 <div class="thirdlogin">
 <div class="pd50">
 <h4>用第三方帐号直接登录</h4>
 <ul>
 <li id="sinal"><a href="//www.jb51.net">微博帐号注册</a></li>
 <li id="qql"><a href="//www.jb51.net">QQ帐号注册</a></li>
 </ul>
 <div class="clear"></div>
 </div>
 </div>

</div><!--loginalert end-->

<div id="reg_setp">
 <div class="back_setp">返回</div>
 <div class="blogo"></div>
 <div id="setp_quicklogin">
 <h3>您可以选择以下第三方帐号直接登录代码笔记,一分钟完成注册</h3>
 <ul class="quicklogin_socical">
 <li class="quicklogin_socical_weibo"><a href="//www.jb51.net">微博帐号注册</a></li>
 <li class="quicklogin_socical_qq" style="margin:0;"><a href="//www.jb51.net">QQ帐号注册</a></li>
 </ul>
 </div>
</div><!--reg_setp end-->
</body>
</html>

以上就是为大家分享的jquery实现的弹出层登录和全屏层注册特效代码,希望大家可以喜欢。

(0)

相关推荐

  • jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

    弹出层用来向用户展示详细的信息,交互性非常强.弹出层有对话框.模态窗口等形式,这里我都把他们叫做弹出层,我的同事们也是这么叫的.一般我们喜欢使用比较成熟的弹出层插件如fancybox等,但在本文,我将先抛弃插件,给大家介绍如何使用jQuery+CSS3+Html5实现弹出层. 效果展示       源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式.甚至js方法调用.我们最终做出来的弹出层效果应该是响应式的,也就是说可以

  • JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)

    本文实例讲述了JS实现常见的TAB.弹出层效果.分享给大家供大家参考.具体如下: 这里演示tab活页夹(网页标签),斑马线,遮罩层.弹出层的简单实现,里面的JS文件,可下拉保存为JS代码调用即可,也可以拷贝在本网页中使用.这个小网页囊括了目前网上流行的风页标签.弹出层以及斑马线效果,很实用啦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tab-alert-bq-style-demo/ 具体代码如下: <!DOCTYPE html PU

  • JS实现仿微博可关闭弹出层效果

    本文实例讲述了JS实现仿微博可关闭弹出层效果.分享给大家供大家参考.具体如下: 这里推荐给大家一款真心不错的JavaScript网页弹出层,仿微博JS弹出层可关闭,点击按钮才弹出来,可制作成网页客服之类的,比如在网页的右侧显示这么一个按钮,当点击的时候,展开层,显示客服QQ,效果还是很不错的! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-weibo-close-able-alert-codes/ 具体代码如下: <!DOCTYPE

  • jQuery Mobile弹出窗、弹出层知识汇总

    先创建一个窗体 <div data-role="popup" id="popupView" class="ui-content" data-overlay-theme="b" data-position-to="window" data-dismissible="false"> <a href='javascript:void(0)' data-rel="ba

  • jquery实现可自动判断位置的弹出层效果代码

    本文实例讲述了jquery实现可自动判断位置的弹出层效果代码.分享给大家供大家参考.具体如下: 这是一款jquery实现的智能弹出层效果,位置可以自适应,当层靠右边显示时自动往左移.初次运行时请按F5刷新,载入远程jQuery后才能看到效果,点击鼠标左键,弹出层将出现,在最右边点击时层自动往左移. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-auto-check-pos-alert-dlg-demo/ 具体代码如下: <!DOC

  • jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)

    本文实例讲述了jquery实现仿新浪微博带动画效果弹出层代码.分享给大家供大家参考.具体如下: 这是一款jquery实现带动画的弹出层,最开始是模拟新浪微博中的弹出层,后来引入了jQuery,又想了想,加入点动画效果不知怎么样,后来就写出了这么一个弹出的网页层效果,你点击按钮后就可以看到一个渐出的可关闭的弹出层,点击关闭后,当然也是渐渐的消失的,移动时根据鼠标位置计算控件左上角的绝对位置,松开鼠标后停止移动并恢复成不透明. 运行效果截图如下: 在线演示地址如下: http://demo.jb51

  • Jquery+CSS3实现一款简洁大气带滑动效果的弹出层

    此Jquery特效是一款Jquery+CSS3实现简洁大气带滑动效果的弹出层,应用范围很广泛,比如用在消息提示.弹出层显示内容.弹出层登录等,带遮罩效果,虽然没有封装成插件,但使用起来也非常简单,宽度和高度直接调样式. 包含了以下功能: 1.弹出层 2.带关闭按钮 3.遮罩层效果 4.从上向下滑动显示 5.点击层外面任何地方关闭 6.绑定控制按钮 7.内容过多自动显示滚动条 如果不满足大家的要求,自己可以二次开发哦 效果如下: 在线演示

  • js实现仿Discuz文本框弹出层效果

    本文实例讲述了js实现仿Discuz文本框弹出层效果.分享给大家供大家参考.具体如下: 这是一个在经典论坛曾经热讨论的问题,记得在QQ邮箱里也有类似功能,Discuz7.0论坛里同样也有,当你的鼠标单击文本框的时候,会弹出一个包含文字.图片.表单无素的DIV层,里面的元素都可以进行操作,很方便,选中的值会自动添加到文本框内.本代码经过了多次修正,没有进行过多美化,你美工好的话可以自己美化. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//D

  • jquery实现的弹出层登录和全屏层注册特效代码分享

    本文实例讲述了jquery实现多条件筛选特效.分享给大家供大家参考.具体如下: jquery实现的弹出层登录和无刷新切换全屏层注册特效源码,是一段非常适合现代审美观的网站登录和注册效果代码,本段实例主要表现在点击登录后在当前页面内弹出登录遮罩层,而点击注册链接时,在当前页面内无刷新显示全屏注册层效果,是一款非常实用的特效代码,值得大家学习. 运行效果图:                           -------------------查看效果 下载源码-----------------

  • jquery实现弹出层登录和全屏层注册特效

    jquery实现的弹出层登录和无刷新切换全屏层注册特效源码,是一段非常适合现代审美观的网站登录和注册效果代码,本段实例主要表现在点击登录后在当前页面内弹出登录遮罩层,而点击注册链接时,在当前页面内无刷新显示全屏注册层效果,是一款非常实用的特效代码,值得大家学习. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery实现的弹出层登录和全屏层注册特效代码如下 <

  • JQuery Mobile 弹出式登录框的实现方法

    <a href="#login" data-rel="popup" data-position-to="window" data-role="button">Login</a> <div data-role="popup" id="login" data-theme="a"> <form style="padding

  • jQuery实现弹出带遮罩层的居中浮动窗口效果

    本文实例讲述了jQuery实现弹出带遮罩层的居中浮动窗口效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pop window</title> <style> *{ padding: 0; margin: 0; } .hide{ display: none

  • jquery实现弹出层完美居中效果

    jquery实现弹出层完美居中效果 复制代码 代码如下: showDiv($("#pop"));function showDiv(obj){ $(obj).show(); center(obj); $(window).scroll(function(){  center(obj); }); $(window).resize(function(){  center(obj); }); } function center(obj){ var windowWidth = document.d

  • jQuery实现弹出窗口弹出div层的实例代码

    通过今天的jquery实例学习,我们要达到这样的效果:点击页面的链接,弹出一个div层,同时页面的其他部分变灰并且不能点击:无论是改变浏览器窗口大小还是下拉滚动条,这个弹出层都能始终保持居中:点击页面的关闭按钮,弹出层消失,页面恢复原样. 这里借鉴之前的一篇文章<基于jQuery的固定飘浮层>,使弹出窗口可以始终固定在浏览器的正中间.在这里有一个要点,就是如何使页面的其他地方在弹出窗口的同时变灰.我使用的方法就是在点击链接弹出div层的时候,给页面增加一个div层,这个层就"负责&q

  • jQuery Layer弹出层传值到父页面的实现代码

    目前做的项目中用到layer弹层传值,弹层输入框输入文本,点击确定按钮,父页面的树结构,会自动添加分组. 在此粘贴下代码,以后遇到,方便回忆,如有疑问请留言,或许会为您解答 $(document).ready(function(){ //添加任务弹出层 addTask(); }); //弹出层 function addTask(){ $('[data-id="addList"]').on('click', function(){ layer.open({ type: 2,title:

  • jquery实现弹出层效果实例

    本文实例讲述了jquery实现弹出层效果的方法.分享给大家供大家参考.具体实现方法如下: <head runat="server"> <title>jQuery弹出层</title> <script type="text/javascript" src="js/jquery-1.3.2-min.js"></script> <script type="text/javasc

  • 关于jquery layui弹出层的使用方法

    Jquery必须大于1.83 layui必须是all,否则不显示 <script src="../js/jquery-1.8.3.min.js"></script> <script src="../layui/layui.all.js"></script> html代码 <input id="about" type="button" value="修改考勤&quo

随机推荐