jQuery实现屏蔽层登录对话框

用户登录是很多网站的必备功能。一种方式是无论在网站的哪个页面，点击登录按钮都会弹出一个蒙版图层，显示用户登录的对话框。这种方法灵活方便。目前扫描二维码登录也很常见，比如QQ、微信、百度等等。现在为什么要求推荐一个有二维码的登录弹出层，可以拖拽关闭，有需要的朋友可以参考。

最后有一个源代码下载。

渲染：

代码如下：

！DOCTYPE html html lang=' zh ' hearta charset=' UTF-8 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge，chrome=1 ' meta name=' viewport ' content=' width=device-width，最小刻度=1.0，最大刻度=1.0，用户可缩放=no' /titlejQuery带二维码登录窗口弹出层特效-何问起/titlelink rel='样式表type=' text/CSS ' href=' CSS/normalize。CSS '/链接类型=' text/CSS ' rel='样式表href=' CSS/style。CSS '/样式类型=' text/CSS ' .tc {显示：块；padd : 1em 1.5 emborder : 3px实心# fffont-weight : 700；余量： 50px自动；背景： # 1d 7分贝1；color: # fff}。TC a :悬停{ opa city 3360 0.6} a { color : blue }/style/head dybutton class=' TC '点击登录/button div id=' gray '/div div class=' popup ' id=' popup ' div class=' top _ nav ' id=' top _ nav ' div align=' center ' span用户登录/span a class=' Guan bi '/a/div/div class=' min ' div class=' TC _ log in ' div class=' left ' H4 align=' center '手机扫描/H4 div align=' center ' img src=' http : images/ERW eima。png ' width=' 150 ' height=' 150 '/div div id=' hover treedd ' div align=' center '扫描二维码登录/div/div/div class=' right '表单方法=' POST '名称=' form _ log in ' target=' _ top ' div align=' center ' a href=' '短信快捷登录/a i class='icon-mobile-phone'/i输入类型=' text ' name=' name ' id=' name ' required=' required '占位符='用户名自动完成=' off ' class=' input _ yh ' input type=' password ' name=' pass ' id=' pass ' required=' required '占位符='密码autocomplete=' off ' class=' input _ mm '/div div id=' hover treedd ' div align=' center ' a href=' http://hover tree。 com/h/bjaf/tui祥子。htm ' target=' _ blank '遇到登录问题/a/div/div/div align='中心'输入类型='提交' class='按钮' title='登录'值='登录/div/form div id=' hover treedd ' div align=' center ' a href=' http://hover tree。com/肖特/bootstrap/5/' target='_blank '立即注册/a/div /div hr对齐='中心/div对齐='中心'期待更多功能/div/div/div/div脚本src=' http :http://down。悬停树。com/jquery/jquery-1。11 .0 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript '//窗口效果//点击登录班级为特克斯和凯科斯群岛显示$('.TC ' .单击(函数(){ $('#gray ')).show()；$('#popup ').show()；//查找身份为弹出的差异显示()显示#灰色TC _ center()；});//点击关闭按钮$('a.guanbi ').单击(函数(){ $('#gray ')).hide()；$('#popup ').hide()；//查找身份为弹出的差异隐藏()隐藏}) //窗口水平居中$(窗口)。resize(function(){ TC _ center()；});函数tc_center(){ var _top=($(window)).高度()-美元(' .弹出式菜单').高度())/2;var _left=($(窗口)。width()-$(' .弹出式菜单').width())/2；$('.弹出式菜单').css({top:_top，left : _ left })；}/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $(')).top _ nav ').鼠标向下(函数(e){ $(本)).css(“”光标','移动');//改变鼠标指针的形状定义变量偏移量=$(这个).offset()；//DIV在页面的位置var x=e . PageX-偏移量。向左；//获得鼠标指针离差异元素左边界的距离var y=e . Pagey-偏移量。顶部；//获得鼠标指针离差异元素上边界的距离$(文档)。绑定(“mousemove”，函数(ev){ //绑定鼠标的移动事件，因为光标在差异元素外面也要有效果，所以要用doucment的事件，而不用差异元素的事件$('.弹出式菜单').stop()；//加上这个之后var _ x=ev。PageX-x；//获得X轴方向移动的值var _ y=ev。佩吉。//获得Y轴方向移动的值$('.弹出式菜单').动画({left:_x 'px '，top:_y 'px'}，10)；});});$(文档)。mouseup(function() { $(').弹出式菜单').css(“”光标','默认');$(这个)。解除绑定(“鼠标移动”)；});})/script div style=' text-align : center；余量：150 px 0；font : normal 14px/24px ' MicroSoft YaHei '；p适用多种浏览器，如火狐，镀铬，边缘等/pp。来源：a href=' http://悬停树。com/' target=' _ blank '何问起/a a href=' http://悬停树。com/h/bjaf/87 a3 BDR 0。htm ' target=' _ blank '说明/a/p/div/body/html源码下载：http://小哉。JB 51。net/201612/马援/hovertreejquery91_jb51.rar

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！