仿百度登陆效果-layer弹窗插件

最新推荐文章于 2023-07-11 10:53:45 发布

辣姐什么鬼

最新推荐文章于 2023-07-11 10:53:45 发布

阅读量1.3k

点赞数

分类专栏： web前端文章标签： web前端

web前端专栏收录该内容

174 篇文章 7 订阅

订阅专栏

layer.layui.com layer弹窗插件，可以使用各种弹窗效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #top{
            width:100%;
            height:40px;
            background-color:black;
            text-align:right;
            font-size:14px;
        }
        #top a{
            color:white;
            text-decoration:none;
            line-height:40px;
            vertical-align:middle;
            margin-right:40px;
          }
        #login{
            display:none;
            margin-left:40px;
        }
        #login a{
            display:block;
            width:300px;
            height:40px;
            background-color:firebrick;
            line-height:40px;
            vertical-align: middle;
            color:white;
            text-decoration:none;
            text-align:center;


        }
        input{
            width:300px;
            height:40px;
            font-size:14px;

        }
        #login .name,.password,.bu{
           margin-lfet:20px;
            margin-top:15px;
        }
        a{
            cursor:pointer;
        }
    </style>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="layer/layer.js"></script>
    <script>
        function showLogin(){
            layer.open({
                type:1,//type为1表示弹出的是div
                title:'登陆',
                area:['395px','300px'],
                content:$('#login')
            });
        }
        function login(){
            var userName= $.trim($(".userName").val());//trim用于去掉空格
            var password= $.trim($(".password").val());
            if(userName==" "||password==" "){
                layer.alert("用户名或密码不能为空",{
                 title:'提示',
                 icon:5
            });
            }else{
                //输入用户名和密码不为空
                //ajax,第一个是传到的后台页面，第二个参数是用户名密码，第三个参数是从后台获取的数据
                $.post("/后台页面",{"userName":userName,"password":password},function(data){
                     if(data=="登陆成功"){
                         layer.alert("登陆成功",{
                             title:'提示',
                             icon:6
                         });
                     }else{
                         layer.alert("用户名或密码出错",{
                             title:'提示',
                             icon:5
                         });
                     }
                });
            }
        }
    </script>
</head>
<body>
<div id="top">
    <a id="reg">注册</a>
    <a id="log" onclick="showLogin()">登陆</a>
</div>
<!--sql注入，利用SQL语句的漏洞来攻击数据库-->
<div id="login">
    <div class="name">
     <input type="text" class="userName" placeholder="请输入用户名">
    </div>
    <div class="password">
     <input type="password" class="password" placeholder="请输入密码">
    </div>
    <div class="bu"><a onclick="login()">登陆</a></div>
</div>

</body>

</html>