jquery +js + css + html pc端 用户登录 嵌入式小模块 方便使用

1.介绍

• 代码样式在css中设置和js中设置
• 代码业务操作在js中设置
• 模块位置处于浏览器绝对定位
• 用户登录成功后的业务可以在js中编写
• 现在登录成功做的是提示信息
• 用户需要修改的地方：js中的登录地址
• 可以把这些代码直接找个文件扔进去就ok
• 非常便捷的哟

 

2.html代码

<!-- 用户登录 -->
    <div class="userInfobf">
        <div class="userinfoTop">
            <span class="userinfoTopleft">账号密码登录</span>
            <span class="userinfoTopright">X</span>
        </div>
        <table>
            <tr><td></td></tr>
            <tr><td>
                账户：<input type="text" placeholder="请输入账号" id="suser"><br>
                密码：<input type="password" placeholder="请输入密码" id="spassword">
            </td></tr>
            <tr><td colspan="2"><span id="ajaxlogin">登录</span></td></tr>
        </table>
    </div>

有需要修改的地方：

• 账号密码登录
• 关闭按钮

 

3.css代码

/** 弹出框样式一记录收号和登录信息 */
/** 主界面样式 **/
.userInfobf{
    position:fixed;
    width:500px;
    height:310px;
    background-color:rgb(255, 255, 255);
    border:2px solid rgb(65, 107, 109);
    border-radius:10px;
    color:rgb(7, 6, 6);
    font-weight:900;
    /* 下边的在真实环境中解开 */
    /* display:none; */
}
/** 表格样式 **/
.userInfobf table{
    width:100%;
    height:260px;
    text-align:center;
}
/** 表格input 样式 **/
.userInfobf table tr td input{
    width:180px;
    height:20px;
    line-height:20px;
    border-radius:5px;
}
/** 登陆按钮样式 **/
#ajaxlogin{
    border:1px solid rgb(69, 220, 240);
    background-color:rgb(43, 121, 73);
    color:#fff;
    padding:5px 80px;
    border-radius:10px; 
    cursor:pointer;
}
/**  标题头部 */
.userinfoTop{
    width:100%;
    height:50px;
    line-height:50px;
    background-color:#f5f5f5;
    font-weight: 100;
}
/**  标题头部左边 */
.userinfoTopleft{
    float:left;
    margin-left:20px;
}
/**  标题头部右边 */
.userinfoTopright{
    float:right;
    cursor:pointer;
    margin-right:20px;
}
/** 弹出框样式一记录收号和登录信息 */

有需要修改的地方：

• 界面初始状态下的隐藏状态，在真实环境下解开隐藏状态

 

4.js代码

 //记录手机号弹出框操作
    var popupPhoneInfoStyle = function () {

        //点击某登录按钮启动当前界面(将xx换成对应的id或class)
        $("#xx").click(function(){
            $(".userInfobf").show();
        });

        //设置样式
        $(".userInfobf").css({
            "left": ((porject.bodyWidth - 500) / 2) + "px"
            , "top": ((porject.bodyHeight - 260) / 2) + "px"
        });

        //登陆地址
        var loginUrl = "http://loscalhost:80/login";

        //提交事件
        $("#ajaxlogin").click(function(){
            var usera = $("#suser").val();
            var passworda =$("#spassword").val();
            
            if(usera == "" || passworda == ""){
                alert("缺少信息！");
                return;
            }
            $.ajax({
                type:"post",
                url:loginUrl,
                data:{"usera":usera,
                "passworda":passworda},
                success:function(data){
                    if(data = 1){
                        alert("登陆成功");
                        $(".userInfobf").hide();
                    }
                },
                error:function(e){
                    alert("登陆失败！");
                }
            });
        });
        $(".userinfoTopright").click(function(){
            $(".userInfobf").hide();
        });
    }
$(document).ready(function () {
    popupPhoneInfoStyle();
});

有需要修改的地方：

• 在真实环境中将注释中的xx换成真实的用户登录按钮id

 

5.界面样式

 

方便使用记录一个

ok