风一样的回忆

新浪微薄腾讯微薄

最新碎语:最近开始学习俄语!!!

您的位置:风一样的回忆 >jQuery> 基于layer插件的二次验证弹窗实现

基于layer插件的二次验证弹窗实现

这里不废话,原理很简单,下面贴出代码。

CSS样式:   

<style type="text/css">
    .login-item input{
        width:350px;
        height:40px;
    }
    .login-item a{
        width:354px;
        height:50px;
        background:#00897B;
        display:block;
        font-size:16px;
        color:#fff;
        line-height:50px;
        text-align:center;
        display:block;
        text-decoration:none;
    }
    .login-item{
        margin-top:15px;
        margin-left:20px;
    }

</style>

HTML代码:

<link rel="stylesheet" type="text/css" href="/static/layer-2.4/skin/layer.css">
<script type="text/javascript" src="/static/layer-2.4/layer.js"></script>
<div id="checkBox" style="display: none;" url="">
    <div class="login-item"><input  type="password" id="InputUserPwd" placeholder="请输入提现密码"/></div>
    <div class="login-item"><a href="javascript:;" onclick="checkpass()">确定</a></div>
</div>

JavaScript代码:

<script type="text/javascript">
    function ischeck(obj){
        $('#checkBox').attr('url',$(obj).attr('url'));
        layer.open({
            type:1,
            title:"二级密码验证",
            area:["395px","200px"],
            content:$('#checkBox'),
        });
    }
    function checkpass(){
        $.ajax({
            url: "<?php echo U('User/checkpass');?>",
            data: {pass:$('#InputUserPwd').val()},
            type: 'POST',
            success: function(data){
    
                if(data.status ==1){
                    window.location.href=$('#checkBox').attr('url');
                }else{
                    layer.alert('密码错误!',{
                        icon: 1,
                        skin: 'layer-ext-moon'
                    })
                }
            }
        })
    }
</script>

效果图:

tan.png

---

转载请注明本文标题和链接:《基于layer插件的二次验证弹窗实现

发表评论

路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交