42-弹框式登录代码

最新推荐文章于 2024-03-02 23:57:11 发布
最新推荐文章于 2024-03-02 23:57:11 发布
阅读量1.5k 收藏
点赞数
分类专栏： HTML/CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuangrenyu1234/article/details/11696823
版权

效果展示：

点击用户登录超链接：


弹出用户登录对话框


目录结构：


test.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen">
#qlogin-con {
	display: none;
	position: absolute;
	z-index: 5000;
	left: 450px;
}

#div1 {
	display: none;
	position: absolute;
	z-index: 1000;
	background: #7B7B7B;
	filter: Alpha(opacity =           30);
}
</style>
<link href="css/guide_q.130605.css" rel="stylesheet" type="text/css" />
</head>
<body>

	<!----------------------------------------------------------------------------登录框开始-->
	<script>
		function openme() {
			document.getElementById('qlogin-con').style.display = 'block';
			document.getElementById('div1').style.display = 'block';
		}
	</script>

	<div id="div1"
		style="width: 1349px; height: 2046px; position: absolute; top: 0; left: 0; -moz-opacity: 0.5; opacity: 0.5; filter: alpha(opacity =       50); background-color: #000; zoom: 1;">
	</div>
	<div id="qlogin-con" class="part-login">
		<div class="mod-left">
			<a href="http://bbs.duowan.com/thread-27379829-1-1.html"
				target="_blank"><img
				src="http://res.udb.duowan.com/img/ad/sdka_d1.jpg" alt="手机令牌内容介绍"
				title="手机令牌内容介绍"></a>
		</div>
		<div class="mod-right">
			<div class="mhd">
				<div style="position: relative; top: -15px; left: 310px;">

					<a href="http://vip.yy.com/vip/activitycenter/index" title="关闭"
						style="color: #A7CFEC;">X</a>

				</div>
				<h2>
					YY安全中心<span>统一登录</span>
				</h2>
				<p>https://udb.yy.com 为YY帐号官方域名 谨防假冒</p>
			</div>
			<div class="mbd">
				<div class="quick-login" id="x-login" style="display: none;">
					<h3>检测到您已登录的YY帐号：</h3>
					<div class="yy-account-list"></div>
					<p class="last">
						<a class="q-login-btn" href="javascript:">快速登录</a><a
							href="javascript:void(0)" class="login-link">用其他帐号登录</a>
					</p>
				</div>
				<div class="common-login" id="lay_wrap" style="display: block;">

					<span id="errorinfo"> <span> <font style="visibility: hidden">请输入验证码 </font>
					</span>
					</span>


					<form id="loginform" name="loginform" action="loginProcess.php"
						method="post">
						<p>
							<input type="text" style="height: 30px;" id="username"
								name="name" value="帐号/邮箱"
								onFocus="if (value =='帐号/邮箱')value =''"
								onBlur="if (value =='')value='帐号/邮箱'"
								οnclick="Login4sdk.click4username()" maxlength="50"
								class="inputstyle" tabindex="1" style="color: gray;"><a
								href="https://udb.yy.com/register.do" target="_blank"
								tabindex="5" class="register-btn">注册新帐号</a>
						</p>
						<p>
							<input type="password" id="showpwd" name="password"
								style="height: 30px;" tabindex="2" class="inputstyle" ><a
								href="https://udb.yy.com/account/forgetPassword2.do"
								target="_blank" tabindex="6" class="fpassword">忘了密码？ </a> <input
								type="hidden" name="oauth_token"
								value="bfb289791cad1822d4f4b339e8d230b3f62194093690d"> <input
								type="hidden" name="denyCallbackURL"
								value="http://vip.yy.com/auth/fail">
						</p>
						<p id="secid">
							<input name="securityCode" class="inputstyle inputstyle1"
								id="securityCode" value="" maxlength="8" type="text"
								tabindex="3"> <a
								href="javascript:Login4sdk.changeSecurityCode();"
								title="看不清?换一张" class="changeOne"><img id="imgSecurityCode"
								src=""></a>
						</p>

						<p class="last">
							<input value="登 录"
								style="background: #4DA5E3; border: 0 none; width: 100px; height: 35px; font-size: 20px; color: #fff;"
								id="login_button" type="submit" tabindex="4"><a
								href="javascript:void(0)" id="quick-change"
								style="display: none;">切换到快速登录</a>
						</p>
					</form>
				</div>
			</div>
		</div>
	</div>








	<div class="g-24">
		<div class="blank10"></div>
		<div class="g-24-6">
			<div class="box-cont-s1" id="mod-login">
				<div class="center mtl mbm">
					<a href="javascript:void(0)" class="pay-st2 fsxxl center"
						οnclick="openme()">用户登录</a>
				</div>	
		</div>
        </div>
</body>
</html>


guide_q.130605.css

@charset "utf-8";
/* CSS Document */
body,div,ul,li,h1,h2,h3,form,input,button,p{margin:0; padding:0;}
ul{list-style:none;}
img {border:0;}
a{text-decoration:none; outline:none;}
a:hover{text-decoration:none;}
q:before, q:after{content:'';}
body, button, input{font:12px/1.5 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;}
h1 {font-size:18px;}
h2 {font-size:16px;}
h3 {font-size:14px;}
.tou{ background-color:#000;filter:alpha(opacity=50);opacity: 0.5; width:1900px; height:500px; position:absolute; left:0; top:0; z-index:-1;}
.part-login,.mod-right .mhd p,.quick-login p .q-login-btn,.btn-blue-login,#errorinfo,#errorinfo span{background:url(../../img/login_bg.gif) no-repeat;}
.part-login{ width:518px; height:298px; border:1px solid #fff;border-radius:5px; margin:0px auto;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.5);-moz-box-shadow:2px 2px 5px rgba(0,0,0,0.5);box-shadow:2px 2px 5px rgba(0,0,0,0.5); background-position:right top; background-color:#f6fafd;}
.mod-left{ width:165px; float:left; overflow:hidden;zoom:1; margin-right:15px;}
.mod-left img{ width:163px; height:298px;border-radius:5px 0 0 5px;} 
.mod-right{ float:left; overflow:hidden; width:333px;}
.mod-right .mhd{ padding: 16px 0 0px; overflow:hidden;zoom:1;}
.mod-right .mhd h2{height:34px; line-height:34px; font-family:"微软雅黑"; font-size:20px; color:#0f8ee8; font-weight:normal; background:url(../../img/login_line.png) no-repeat bottom  left; padding:0 0 1px 20px;}
.mod-right .mhd h2 span{ font-size:16px; color:#b4b8bf; padding-left:10px;}
.mod-right .mhd p{ background-position: 8px -448px; height:25px; line-height:25px; padding-left:27px;color:#78a0c7;} 
.mod-right .quick-login{ overflow:hidden; padding:16px 0 0 10px;zoom:1;}
.mod-right .quick-login h3{ font-size:12px; font-weight:normal; color:#828b9a; padding-bottom:6px;zoom:1;}
.mod-right .quick-login p{ overflow:hidden;zoom:1; margin-bottom:7px; vertical-align:middle; height:18px; line-height:18px;}
.mod-right .quick-login p.last{ height:auto; padding-top:5px;zoom:1;}
.quick-login p label{ vertical-align:middle; color:#545c5f;}
.quick-login p input{ vertical-align:middle; margin-right:4px;}
.quick-login p .q-login-btn,.btn-blue-login{ background-position: 0 -386px; width:100px; height:32px; line-height:32px; text-align:center; display:block; color:#fff; font-size:18px; font-family:"微软雅黑"; text-decoration:none; margin-right:17px; float:left;}
.quick-login p .login-link{ display:inline-block; margin-top:14px; color:#0e9fed; float:left;}
.common-login{ overflow:hidden;zoom:1; padding:32px 0 0 10px; display:none; position:relative;}
.common-login p{zoom:1; margin-bottom:12px; height:28px; line-height:28px;}
.common-login p.last{ height:auto; padding-top:5px;zoom:1; overflow:hidden;}
.common-login .inputstyle{ float:left; width:200px; border:1px solid #d3d6db;border-radius: 3px; padding:4px; color:gray; margin-right:6px; height:18px; line-height:18px;-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;-ms-transition: border linear 0.2s, box-shadow linear 0.2s;-o-transition: border linear 0.2s, box-shadow linear 0.2s;transition: border linear 0.2s, box-shadow linear 0.2s; -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);}
  
.common-login .inputstyle:focus{ border-color: rgba(82, 168, 236, 0.8);-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);outline:0 none;}  
.register-btn{ color:#818d9d; float:left;}
.fpassword{ color:#818d9d;}
.register-btn:hover,.fpassword:hover{ color:#0e9fed; text-decoration:underline;}
.common-login .inputstyle1{ width:100px; float:left;margin-right:14px;}
.changeOne{ float:left; }
.btn-blue-login{ border: 0 none; cursor:pointer; padding-bottom:4px; float:left;}
.common-login p.last a{ float:left; padding-top:9px; color:#0e9fed;}
#errorinfo{ background-position:0 -324px; height:34px; overflow:hidden;zoom:1; display:inline-block; padding-left:17px; position:absolute; left:16px; top:8px; display:none;}
#errorinfo span{background-position:100% -324px; height:34px; overflow:hidden;zoom:1;float:left; display:inline-block; line-height:25px; color:#cc0000; padding-right:13px;font-size:12px;max-width: 276px;}
#errorinfo span font{font:12px/1 Tahoma,Helvetica,Arial,"宋体",sans-serif; line-height:25px;display: block;height: 25px;overflow: hidden;}
#password{display:none;position:absolute;}
.changeOne img{ width:85px; height:26px;}
#secid{display:none;}
.login-close{position: absolute; padding: 0px 10px; top: 3px; right: 2px; font-weight: bold; font-size: 14px;}
.login-close a{color: #A7CFEC;}
.common-login p.rememberCon{ margin-bottom:0px; vertical-align:middle;display:none;}
.common-login p.rememberCon label{ vertical-align:middle;}
.common-login p.rememberCon input{ vertical-align:middle; margin-right:4px;}



会编程的阿强
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
七、js点击弹窗弹出登录框代码
qq_52916408的博客
03-27 2440
文章目录七、js点击弹窗弹出登录框代码7.1 图片预览7.2 index.html代码 七、js点击弹窗弹出登录框代码 7.1 图片预览 7.2 index.html代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
jQuery实现时尚漂亮的弹出式对话框实例
12-01
本文实例讲述了jQuery实现时尚漂亮的弹出式对话框。分享给大家供大家参考。具体如下： 这是一款十分简洁漂亮的HTML5弹出对话框效果，基于jQuery来实现，引入了jquery1.6.2库。 本效果描述：用鼠标点击一下右上角的小图标，会弹出一个层对话框，里面可以提交留言、评论之类的。 运行效果截图如下： 具体代码如下： <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery对话框-时尚漂亮</title> <style> *{mar
网页弹框总结源码
05-03
总结了各式弹出对话框，自己总结的同时希望对大家有用 // dlg.Com("test1", "标准移动对话框", html, 480, btnClose); //两个有点类似 // dlg.Alert("系统提示", "确定要删除吗？", btn1, btn2); //dlg.Confirm("系统提示", "确定要删除吗？", btn1, btn2); // dlg.Msg.Err("错误提示"); // dlg.Msg.Inf("系统信息"); // dlg.Msg.Cor("正确提示"); // dlg.Infor("提示一下",btn1); //dlg.Error("提示一下", btn1); dlg.Common("标题", "内容", 400, btn1, btn2);
web全栈开发之网站开发二（弹出式登录注册框前端实现-类腾讯）
abc123000203的博客
01-06 722
这次给大家分享的是目前很多网站中流行的弹出式登录框，如下面的腾讯网登录界面，采用弹出式登录的好处是大大提升了网站的用户体验和交互性，用户不用重新跳转到指定的页面就能登录，非常方便 先来个演示地址 要实现这个功能的大致思路是： 1.首先要在页面上设置一个登录按钮，可以是<button><a><img>都行，我们点击这个元素的时候会弹出登录框 ...
纯css实现登录表单动效
大白兔奶糖的博客
08-03 1538
【代码】纯css实现登录表单动效。
弹出式登陆框(css+div+jquery)
Comexs的专栏
05-03 2024
以前写的弹出式登陆框，跟大家分享下,点击登陆可以弹出登陆框，很多网站都采取这种弹出式登陆框来做为登陆界面.但在这里我没有进行锁屏，希望有兴趣的可以完善下~~ 原代码如下: 弹出式登陆框 $(document).ready(function(){ $(".div1").click(function() {
实现弹出登录窗口
weixin_30604651的博客
12-23 168
<div id="layer" style="display: none; " class="loginForm"> <s:form name="loginForm" action="login" namespace="/member" method="post" > 　　<div class="loginInputStyle"> 　　用户名&a...
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
10-15
主要介绍了Vue项目中结合Vue-layer实现弹框式编辑功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Android代码-AppUpdater版本更新、一键傻瓜式升级App
08-07
AppUpdater for Android 是一个专注于App更新一键傻瓜式集成的开源库，主要包括app-updater和app-dialog。 > 下载更新和弹框提示分开，是因为这本来就是两个逻辑。完全独立开来能有效的解耦。 app-updater 主要负责...
HTML+CSS+JS 简单登录注册功能页
最新发布
umin_的博客
03-02 1037
简单登录注册功能页面
点击登陆链接在本页面弹出一个登陆窗口效果
一只小菜鸟的技术博客
09-29 1万+
效果描述：点击登陆链接在本页面弹出一个登陆窗口效果，页面变灰暗，且不关闭窗口页面无法浏览。 效果图： 1.页面代码： 登陆 登陆 用户名/Email： 密码：
flex实现元素水平居中
weixin_42009735的博客
03-19 387
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
js+css实现点击导航条“登录”弹出登录框界面
热门推荐
杉楂的博客
12-13 1万+
依旧是项目的登录问题，不过这次是界面。 实现弹出页面的效果还可以使用如bootstrap模态框一类的javascript插件，不过这里使用的是js+css简单实现的效果。 首先是导航条的“登录”： nav-login" href="javascript:;">登录 接着是login表单界面： login-form"> × 用户登录 用户名 密码
54-html页面小项目------------新疆行之书
高调做事，低调做人！
12-06 1万+
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"> <hea...
05-css实现图文混排（页面效果）
高调做事，低调做人！
06-21 6392
CSS控制绝对定位 .picture { /* 在文本左边 */ float: left; /* 图片边框的颜色 */ border: 1px solid #000000; /* 上方与其他元素保持10px */ margin-top: 10px; /* 下方与其他元素保持10px */ margin-bottom: 10px; /* 左侧与其他元素保持10px */ mar
52-设置斑马纹效果的表格
高调做事，低调做人！
10-16 4461
无标题文档 table { background-color:#fff; border:1px solid #000; color:#565; font:12px arial; text-align:center; } table caption { font-size:24px; border-bottom:2px solid #b3de94; bord
03-iframe属性src的使用
高调做事，低调做人！
06-09 3535
src如果写成jsp页面，将会访问jsp页面， 如果写成某个Action，会在访问该页面的时候自动的调用这个Action。     管理中心 <body style="background:rgb(46, 110, 17) url(img/bg.png) repeat-x scroll 0% 0%"> indexAction_visitMenus" width=
45-段落的设置字间距，行间距，段落间距，设置首行缩进,设置首字母大写，设置大写，设置小写,设置意大利体
高调做事，低调做人！
09-28 2804
1.设置首行缩进：text-indent:2em; 2.设置段落之间的距离：margin:20px 0px; 3.设置行间距：line-height 4.设置文字之间的距离：letter-spacing 5.设置字母之间的距离：letter-spacing 6.设置单词之间的距离：word-spacing 7.
vue3 共用一个 el-dialog弹框组件 实现新增和编辑 怎么写代码 用setup方法 父组件 子组件 代码都要
05-26
在父组件中，我们使用`ref`创建了一个名为`dialogVisible`的响应式变量，用于控制弹框的显示与隐藏。除此之外，我们还创建了一些方法，如`showAddDialog`、`showEditDialog`、`handleSubmit`和`handleClose`。这些...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

会编程的阿强

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值