经验分享程序开发文档资料数据资源其它资源

jQuery模态窗口登陆效果js代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery模态窗口登陆效果js代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery模态窗口登陆效果js代码

HTML代码(index.html):

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>jQuery模态窗口登陆效果</title>
  <link rel="stylesheet" type="text/css" media="all" href="style.css">
  <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="js/jquery.leanModal.min.js"></script>
</head>

<body>
  <div id="w">
    <div id="content">
      <h1>Welcome to the Site!</h1>
      <p>Just click the login link below to expand the modal window. This is only a demo so the input form will not load anything, but it is easy to connect into a backend system.</p>
      <center><a href="#loginmodal" class="flatbtn" id="modaltrigger">Modal Login</a></center>
    </div>
  </div>
  <div id="loginmodal" style="display:none;">
    <h1>User Login</h1>
    <form id="loginform" name="loginform" method="post" action="index.html">
      <label for="username">Username:</label>
      <input type="text" name="username" id="username" class="txtfield" tabindex="1">
      
      <label for="password">Password:</label>
      <input type="password" name="password" id="password" class="txtfield" tabindex="2">
      
      <div class="center"><input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" tabindex="3"></div>
    </form>
  </div>
<script type="text/javascript">
$(function(){
  $('#loginform').submit(function(e){
    return false;
  });
  $('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
});
</script>
</body>
</html>

JS代码(jquery.leanModal.min.js):

// leanModal v1.1 by Ray Stone - http://finelysliced.com.au// Dual licensed under the MIT and GPL(function($){
	$.fn.extend({
	leanModal:function(options){
	var defaults={
	top:100,overlay:0.5,closeButton:null}
;
	var overlay=$("<div id='lean_overlay'></div>");
	$("body").append(overlay);
	options=$.extend(defaults,options);
	return this.each(function(){
	var o=options;
	$(this).click(function(e){
	var modal_id=$(this).attr("href");
	$("#lean_overlay").click(function(){
	close_modal(modal_id)}
);
	$(o.closeButton).click(function(){
	close_modal(modal_id)}
);
	var modal_height=$(modal_id).outerHeight();
	var modal_width=$(modal_id).outerWidth();
	$("#lean_overlay").css({
	"display":"block",opacity:0}
);
	$("#lean_overlay").fadeTo(200,o.overlay);
	$(modal_id).css({
	"display":"block","position":"fixed","opacity":0,"z-index":11000,"left":50+"%","margin-left":-(modal_width/2)+"px","top":o.top+"px"}
);
	$(modal_id).fadeTo(200,1);
	e.preventDefault()}
)}
);
	function close_modal(modal_id){
	$("#lean_overlay").fadeOut(200);
	$(modal_id).css({
	"display":"none"}
)}
}
}
)}
)(jQuery);

CSS代码(style.css):

/** resets **/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;outline:none;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html{height:101%;}
body{background:#f0f0f0 url('images/bg.gif');font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#313131;font-size:62.5%;line-height:1;}
::selection{background:#a4dcec;}
::-moz-selection{background:#a4dcec;}
::-webkit-selection{background:#a4dcec;}
::-webkit-input-placeholder{/* WebKit browsers */
 color:#ccc;font-style:italic;}
:-moz-placeholder{/* Mozilla Firefox 4 to 18 */
 color:#ccc;font-style:italic;}
::-moz-placeholder{/* Mozilla Firefox 19+ */
 color:#ccc;font-style:italic;}
:-ms-input-placeholder{/* Internet Explorer 10+ */
 color:#ccc !important;font-style:italic;}
br{display:block;line-height:2.2em;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
ol,ul{list-style:none;}
input,textarea{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;outline:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
strong{font-weight:bold;}
table{border-collapse:collapse;border-spacing:0;}
img{border:0;max-width:100%;}
#topbar{background:#4f4a41;padding:10px 0 10px 0;text-align:center;}
#topbar a{color:#fff;font-size:1.3em;line-height:1.25em;text-decoration:none;opacity:0.5;font-weight:bold;}
#topbar a:hover{opacity:1;}
/** typography **/
h1{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:2.5em;line-height:1.5em;letter-spacing:-0.05em;margin-bottom:20px;padding:.1em 0;color:#444;position:relative;overflow:hidden;white-space:nowrap;text-align:center;}
h1:before,h1:after{content:"";position:relative;display:inline-block;width:50%;height:1px;vertical-align:middle;background:#f0f0f0;}
h1:before{left:-.5em;margin:0 0 0 -50%;}
h1:after{left:.5em;margin:0 -50% 0 0;}
h1 > span{display:inline-block;vertical-align:middle;white-space:normal;}
p{display:block;font-size:1.35em;line-height:1.5em;margin-bottom:22px;}
.center{display:block;text-align:center;}
/** page structure **/
#w{display:block;width:750px;margin:0 auto;padding-top:30px;}
#content{display:block;width:100%;background:#fff;padding:25px 20px;padding-bottom:35px;-webkit-box-shadow:rgba(0,0,0,0.1) 0px 1px 2px 0px;-moz-box-shadow:rgba(0,0,0,0.1) 0px 1px 2px 0px;box-shadow:rgba(0,0,0,0.1) 0px 1px 2px 0px;}
.flatbtn{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline-block;outline:0;border:0;color:#f3faef;text-decoration:none;background-color:#6bb642;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);font-size:1.2em;font-weight:bold;padding:12px 22px 12px 22px;line-height:normal;text-align:center;vertical-align:middle;cursor:pointer;text-transform:uppercase;text-shadow:0 1px 0 rgba(0,0,0,0.3);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(15,15,15,0.3);-moz-box-shadow:0 1px 0 rgba(15,15,15,0.3);box-shadow:0 1px 0 rgba(15,15,15,0.3);}
.flatbtn:hover{color:#fff;background-color:#73c437;}
.flatbtn:active{-webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 5px rgba(0,0,0,0.1);box-shadow:inset 0 1px 5px rgba(0,0,0,0.1);}
/** custom login button **/
.flatbtn-blu{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline-block;outline:0;border:0;color:#edf4f9;text-decoration:none;background-color:#4f94cf;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);font-size:1.3em;font-weight:bold;padding:12px 26px 12px 26px;line-height:normal;text-align:center;vertical-align:middle;cursor:pointer;text-transform:uppercase;text-shadow:0 1px 0 rgba(0,0,0,0.3);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 1px rgba(0,0,0,0.2);}
.flatbtn-blu:hover{color:#fff;background-color:#519dde;}
.flatbtn-blu:active{-webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 5px rgba(0,0,0,0.1);box-shadow:inset 0 1px 5px rgba(0,0,0,0.1);}
/** modal window styles **/
#lean_overlay{position:fixed;z-index:100;top:0px;left:0px;height:100%;width:100%;background:#000;display:none;}
#loginmodal{width:300px;padding:15px 20px;background:#f3f6fa;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 1px 5px rgba(0,0,0,0.5);-moz-box-shadow:0 1px 5px rgba(0,0,0,0.5);box-shadow:0 1px 5px rgba(0,0,0,0.5);}
#loginform{/* no default styles */
}
#loginform label{display:block;font-size:1.1em;font-weight:bold;color:#7c8291;margin-bottom:3px;}
.txtfield{display:block;width:100%;padding:6px 5px;margin-bottom:15px;font-family:'Helvetica Neue',Helvetica,Verdana,sans-serif;color:#7988a3;font-size:1.4em;text-shadow:1px 1px 0 rgba(255,255,255,0.8);background-color:#fff;background-image:-webkit-gradient(linear,left top,left bottom,from(#edf3f9),to(#fff));background-image:-webkit-linear-gradient(top,#edf3f9,#fff);background-image:-moz-linear-gradient(top,#edf3f9,#fff);background-image:-ms-linear-gradient(top,#edf3f9,#fff);background-image:-o-linear-gradient(top,#edf3f9,#fff);background-image:linear-gradient(top,#edf3f9,#fff);border:1px solid;border-color:#abbce8 #c3cae0 #b9c8ef;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.25),0 1px rgba(255,255,255,0.4);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.25),0 1px rgba(255,255,255,0.4);box-shadow:inset 0 1px 2px rgba(0,0,0,0.25),0 1px rgba(255,255,255,0.4);-webkit-transition:all 0.25s linear;-moz-transition:all 0.25s linear;transition:all 0.25s linear;}
.txtfield:focus{outline:none;color:#525864;border-color:#84c0ee;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.15),0 0 7px #96c7ec;-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.15),0 0 7px #96c7ec;box-shadow:inset 0 1px 2px rgba(0,0,0,0.15),0 0 7px #96c7ec;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
36.21 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
36.21 KB
立即下载
薛珠
了解
打赏作者 鼓励作者
jquery特效5
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章