js实现登录弹框
本文实例为大家分享了js实现登录弹框，供大家参考，具体内容如下
html:
<body> <div id="M"><!--用div将所有东西套起来,需要设置绝对位置--> <input type="button" value="登录" class="login_btn" onclick="login()"><!--触发登陆弹框按钮--> </div> </body>
css:
#bg {/*重点:指定黑色背景覆盖在所有组件上*/
background-color: rgba(0, 0, 0, 0.5);//0.5为透明度
position: fixed;/*绝对位置*/
z-index: 999;/*显示在最高层*/
}
* {/*去掉外边界*/
margin: 0;
padding: 0;
}
#M {/*重点:装所有东西,再将此div设置为绝对位置,方便写弹出界面,宽度别忘了,否则可能乱布局*/
position: absolute;
width: 100%;
}
#close {/*不重要:弹框右上角的x样式*/
border: none;
background-color: white;
float: right;
margin-right: 20px;
margin-top: 15px;
font-size: 20px;
}
#login {/*重要:登录框*/
border-radius: 20px;
background-color: white;
position: fixed;/*重点绝对布局*/
box-shadow: 0 0 10px 2px gray;
width: 400px;
height: 300px;
z-index: 1000;/*重点显示在背景层之上,该属性大于背景的该属性*/
left: 55%;
top: 60%;
margin-left: -250px;
margin-top: -250px;
}
/*以下不是重点,登陆框中的具体内容*/
#login form {
margin-top: 50px;
}
#login form table {
margin: 0 auto;
}
#login form table tr td {
text-align: center;
border: none;
padding: 5px;
}
#login form table tr td .rem_pass {
font-size: 12px;
float: left;
margin-top: 10px;
margin-left: 30px;
}
#login form table tr td .rem_pass input {
height: 15px;
vertical-align: bottom;
margin-bottom: 1px;
margin-top: -1px;
}
#login form table tr .lable {
text-align: right;
}
#login form table tr #btn_login {
background-color: black;
margin-right: 60px;
}
.login_btn {
z-index: 1;
margin: 0 auto;
}
/*# sourceMappingURL=login.css.map */
js:
重点在于js
function login() {
//生成背景div和登录框div并添加到body中
var swidth = window.screen.width;
var sheight = window.screen.height;
var bg = document.createElement("div");
bg.id = "bg";
bg.style.width = swidth + "px";
bg.style.height = sheight + "px";
document.body.appendChild(bg);
var login = document.createElement("div");
login.id = "login"
//这里下边一条用于设置登陆框中的内容,不重要
login.innerHTML="<button οnclick='close()' id='close'>X</button><form action='https://www.baidu.com/s' method='get'><table></tr><tr><td colspan='2'><h2>登录到记享</h2></td></tr><tr><td class='lable'><label for='user'></label>用户名:</td><td><input id='user' class='in' autofocus='autofocus' autocomplete=\"on\" type='text'></td></tr><tr><td class='lable'>密码:</td><td><input class='in' type='password'></td></tr><tr><td colspan='2'><div class='rem_pass' ><label><input id='chioce' type='checkbox' name='rem' value='sadasd'>记住密码</label></div><button type=\"submit\" class=\"btn btn-info\"id='btn_login' >登录</button></td></table></form>"
document.body.appendChild(login);
//不重要:设置关闭按钮和点击背景触发关闭事件
var close = document.getElementById("close");
close.onclick = bg.onclick = function () {
document.body.removeChild(bg);
document.body.removeChild(login);
}
};
window.onload = function(){
var btn = document.getElementById("login");
btn.onclick=function(){
login();
return false;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JSP实现弹出登陆框以及阴影效果
本文实例为大家分享了JSP实现弹出登陆框以及阴影效果的具体代码,供大家参考,具体内容如下 先说下思想JSP弹出登陆框的思想,我们在JSP中新建一个div层,然后Display设置成none,这样打开后是不可见的,然后我们通过一个点击事件,比如当我们点击登陆按钮时,就给它注册一个点击事件,使得div层变得可见,这样就实现了弹出效果. 代码如下: CSS样式: <style> .win { POSITION:absolute; left:55%; top:60%; width:400px; hei
-
JavaScript实现弹出式可拖动登录框
本文实例为大家分享了JavaScript实现弹出式可拖动登录框的具体代码,供大家参考,具体内容如下 效果图展示: 总体来说实现起来比较简单,老规矩,先搭建html框架,代码如下: <div class="login-header"><a id="link" href="javascript:;" >点击,弹出登录框</a></div> <div id="login"
-
js实现点击弹窗弹出登录框
本文实例为大家分享了js实现点击弹窗弹出登录框的具体代码,供大家参考,具体内容如下 1 图片预览 2 index.html代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1
-
js实现登录弹框
本文实例为大家分享了js实现登录弹框,供大家参考,具体内容如下 html: <body> <div id="M"><!--用div将所有东西套起来,需要设置绝对位置--> <input type="button" value="登录" class="login_btn" onclick="login()"><!--触发登陆弹框按钮--&g
-
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ 可以从官网上下载最新版本. 使用layer实现登录弹框,登录成功以后关闭弹框,并调用父窗口方法. 1.界面如下: 2.login.html的界面主要代码: <div class="layer_form"> <div class="form_item"> <label>手机号码:</label> <div c
-
vue.js前端网页弹框异步行为示例分析
目录 1. 序 2. 找两个弹框组件看看 3. 自己肝一个 3.1. 封装 Promise 3.2. 确定时允许异步等待 3.3. 细节完善 3.4. 改革 1. 序 网页弹框是个很常见的功能,比如需要告知用户消息的时候 (Alert),需要用户进行确认的时候 (Confirm),需要用户补充一点信息的时候 (Prompt) -- 甚至可以弹框让用户填写表单 (Modal Dialog). 弹框之后,开发者需要知道这个弹框是什么时候关闭以便进行接下来的操作. 在比较古老的 UI 组件中,这个事情
-
js实现上下左右弹框划出效果
效果图: 图(1)初始图 图(2)点击"从右侧划出" 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,
-
js实现登录注册框手机号和验证码校验（前端部分）
开发的很多场景中都会用到手机号的校验和验证码的校验,具体实现如下 <div> <input type="text" name="phonenumber" placeholder="请输入您的手机号码" /> <input type="text" name="verify" placeholder="请输入验证码" /><input type=&q
-
js登录弹出层特效
复制代码 代码如下: <!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=&qu
-
JS模拟Dialog弹出浮动框效果代码
本文实例讲述了JS模拟Dialog弹出浮动框效果代码.分享给大家供大家参考.具体如下: 这里演示JS模拟Dialog弹出浮动框,蓝色经典风格,可以创建一个新层,可设置弹出层的标题和内容,用它可实现一个登录框,或用在后台管理中. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mn-dialog-float-dlg-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
-
vue.js中toast用法及使用toast弹框的实例代码
1.首先引入 import { Toast } from 'vant' 写个小列子 绑定一个click事件 2.写事件 在methods写方法 showToast() { this.$toast({ message: "今日签到+3", }) }, 3.效果图如下 一个简单的toast提示成就好了 下面通过实例代码看下vue 中使用 Toast弹框 import { ToastPlugin,ConfirmPlugin,AlertPlugin} from 'vux' Vue.use(To
-
vue实现简单的登录弹出框
本文实例为大家分享了vue实现简单的登录弹出框的具体代码,供大家参考,具体内容如下 初学vue框架,小小的写了一个登录弹出框效果 各路大佬多多指教. 不多废话,直接上代码: CSS: *{margin:0;padding:0;} /*登陆按钮*/ #app{ width:140px; height:36px; margin:10px auto; } #login,#login a{ width: 200px; height: 38px; line-height:38px; text-align:
-
js点击文本框弹出可选择的checkbox复选框
本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展. 代码如下: <html> <head> <meta charset="gb2312"> <title>js点击文本框弹出可选择的checkbox复选框</title> <style type="text/