jQuery写登录弹窗并居中显示

需求

做一个登录弹框，点击登录按钮就弹出，点击右上角×就关闭
居中显示，并且随着窗口变化而变化
让除了弹框以外区域灰色，也就是加个遮罩图层

效果

先放下仿照的效果图：

代码

HTML


<div class="box_lg" style="display: none"><div class="box_tit"><a class="close" href="#">×</a><div class="login-title">登录账号</div></div><div class="box_cont"><form class="box_frm" action="http://www.baidu.com"><ol><li><input type="text" name="mobile" maxlength="11" class="login-input" placeholder="请输入手机号"/></li><li class="password-li"><input type="text" name="smscode" class="login-input" placeholder="验证码" autocomplete="off"/><button type="button" class="msg-button">获取短信验证码</button></li><li><input type="submit" value="登录" class="btn btn-primary btn_frm"></li></ol></form>
</div>

CSS


.beianLink {color: #fff;margin-left: 10px;
}.box_lg {width: 400px;background-color: #fff;padding: 20px;font-size: 14px;margin: 0 auto;position: fixed;left: 700.5px;top: 241px;height: 300px;z-index: 9001;border-radius: 4px;}
.close {position: absolute;top: 0;right: -30px;width: 16px;height: 16px;background-image: url(https://cloudcache.tencent-cloud.cn/open_proj/proj_qcloud_v2/gateway/login-regist/login/pc/css/sprite/login-20219241033.png);text-indent: -10000px;overflow: hidden;outline: 0;background-position: -18px 0px;
}.box_lg ol{padding:0;margin:0;list-style:none
}.login-input {font-size: 14px;line-height: 28px;height: 45px;display: inline-block;padding: 7px 10px;border: 1px solid #ddd;color: #333;vertical-align: middle;width: 100%;background-color: #fff;margin-top: 10px;
}.login-input:focus, .login-input:hover {border-color: #00a4ff;outline: 0;
}.login-title {font-size: 24px;line-height: 40px;margin-bottom: 15px;text-align: center;color: #000;
}.btn_frm {height: 45px;padding: 0 20px;background-color: #00a4ff;color: #fff;font-size: 16px;line-height: 45px;text-align: center;display: inline-block;cursor: pointer;outline: 0;box-sizing: border-box;text-decoration: none;width: 100%;border: none;margin-top: 40px;
}.box_ft {margin-top: 20px;border-top: #ddd 1px dashed;padding-top: 20px;text-align: justify;display: flex;
}.box_ft div{display: inline-block;width: auto;flex: 1;text-align: center;border-left: #e5e5e5 1px solid;
}.box_ft div:first-child {border: 0;
}.box_ft a {text-decoration: none;color: #000;
}.box_ft a:hover {color: #00a4ff;
}.password-li {position: relative;
}.msg-button {position: absolute;top: 22px;right: 0;color: #175199;height: auto;line-height: inherit;background-color: transparent;border: none;border-radius: 0;cursor: pointer;
}

JS

注意：需要引用jquery


// 登录弹框
$(document).ready(function(){$(".headerLoginBtn").click(function(){$(".login_mask").show();center($('.box_lg'));$(".box_lg").slideDown(200);// 浏览器窗口大小改变时$(window).resize(function() {center($('.box_lg'));});// 浏览器滚动时的操作$(window).scroll(function() {center($('.box_lg'));});// 禁止滚动$('body').css({"overflow-x":"hidden","overflow-y":"hidden"});});$(".close").click(function(){$(".login_mask").hide();$(".box_lg").hide(100);// 开启滚动$('body').css({"overflow-x":"auto","overflow-y":"auto"});})});// 居中显示弹框
function center(obj) {var screenWidth = $(window).width();screenHeight = $(window).height(); //当前浏览器窗口的 宽高var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度var objLeft = (screenWidth - obj.width()) / 2;var objTop = (screenHeight - obj.height()) / 3 + scrolltop;obj.css({left: objLeft + 'px', top: objTop + 'px'});
}

参考：
用JQuery写出登录弹出框_webnoob-CSDN博客_jquery点击弹出登录框
jquery实现弹窗功能（窗口居中显示）_jquery_脚本之家
jquery弹窗时禁止body滚动条滚动的例子_jquery_脚本之家

jQuery写登录弹窗并居中显示相关推荐

JQuery datatables 标题和内容居中显示
1.如题,使用到了强大的表格插件datatables,要使标题和内容都居中显示,只需要在jsp引入css,写上如下内容即可: [java] view plain copy /*qiulinhe:201 ...
Js控制弹窗实现在任意分辨率下居中显示
弹窗居中比较烦人的是怎么才能在任意分辨率下实现居中显示. 1,html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
jquery在html中显示文字居中,jquery单击文字或图片内容放大并居中显示
我们想要实现的效果是: 点击一张小图,会在页面的居中位置显示一张大图. 使用了animate动画函数,有从小图到大图,从小图位置到居中位置的轨迹. 支持IE7及以上浏览器,火狐.谷歌浏览器. 大图得居 ...
让div在body中居中显示
转摘自:https://www.cnblogs.com/ferron/p/4251900.html.谢谢大神分享. 如何让DIV相对于body水平和垂直居中我们在设计页面的时候,经常要把DIV居中显 ...
html实现页面中内容居中显示图片,javascript怎么让图片居中显示？
javascript怎么让图片居中显示?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. javascript让图片居中显示的方法 1.准备一个图片,如图, ...
uniapp手写自定义弹窗
uniapp手写自定义弹窗弹窗这种东西真的是太常见了常见到烂大街但是每个平台的弹窗都不太一样样式不统一就不怎么好看像把代码编译到安卓端然后就- 哎不说了安卓离苹果的距离还是很远的这里只限 ...
如何让图片自适应不同屏幕宽度，并居中显示。
我们在浏览网站的时候发现,很多网站的banner图片都是全屏宽度.这种图片都是在不同分辨率下都是显示图片的中间部分,这里我们介绍两种方式, 第一种就是常见的方式,用定位我简单定义为三部曲: - 让包 ...
ABAP--如何将REUSE_ALV_GRID_DISPLAY的题头自适应居中显示
最近有个网友的用户需要将REUSE_ALV_GRID_DISPLAY的题头居中显示,我看看了SAP的代码,发现时可以实现的. REUSE_ALV_GRID_DISPLAY的题头原理和机制 SAP的RE ...
html自动轮播计时器不准,用jQuery写的图片轮播为何停止定时器只能停止一次？...
用jQuery写的图片轮播为何只有初次鼠标进入才能停止定时器?给我的感觉是后面无法停止自动播放,而且播放速度加快,调试很久不知问题出现在哪. 附上demo网址参考:http://huzerui.com ...
用jQuery写的最简单的表单验证
近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...

jQuery写登录弹窗并居中显示

需求

效果

代码

HTML

CSS

JS

jQuery写登录弹窗并居中显示相关推荐

最新文章

热门文章