jQuery实现遮罩层登录对话框

(编辑：jimmy 日期: 2024/10/2 浏览：2)

用户登录是许多网站必备的功能。有一种方式就是不管在网站的哪个页面，点击登录按钮就会弹出一个遮罩层，显示用户登录的对话框。这用方式比较灵活方便。而现在扫描二维码登录的方式也是很常见，例如QQ、微信、百度等。现在何问起推荐一个带二维码的登录弹出层，可拖动、关闭，有需要的朋友可以参考一下。

结尾附有源码下载。

效果图：

代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>jQuery带二维码登录窗口弹出层特效 - 何问起</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<style type="text/css">
 .tc{display: block;padding: 1em 1.5em;border: 3px solid #fff;font-weight: 700;margin: 50px auto;background:#1d7db1;color: #fff;}
 .tc a:hover{opacity: 0.6;}
 a{color:blue}
</style>
</head>
<body>
<button 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="guanbi"></a>
 </div>
 </div>
 <div class="min">
 <div class="tc_login">
 <div class="left">
 <h4 align="center">手机扫描</h4>
 <div align="center"><img src="/UploadFiles/2021-04-02/erweima.png">

源码下载：http://xiazai.jb51.net/201612/yuanma/hovertreejquery91_jb51.rar
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

上一篇：JQuery获取鼠标进入和离开容器的方向

下一篇：JS实现的简易拖放效果示例

jQuery实现遮罩层登录对话框

最新资源