基于LayUI弹出层的密码验证功能

        由于近期需调整接口，所以需要在一个容易误操作的地方添加一个验证功能，然后请我们的前端做了一个基于LayUI的弹出层框架

//点击按钮触发弹窗
$('#topBoxContent').on("click"," .t_cont_button:not(.ban)",function(){
    var elem = $(this);
    var id = elem.parents('.t_boxb').attr('id');
    var status= elem.attr('currentStatus');
    layer.open({
        title: '请输入二次密码',
        area:['280','250'],
        content:'<div>' +
                    '<div className="layui-form-item">'+
                    '<label className="layui-form-label">密码:&nbsp;</label>'+
                    '<input class="form-control" type="password" id="password" required    lay-verify="required" placeholder="请输入密码" autoComplete="off" className="layui-input">'+
                    '</div></div>',
        yes:function(){
        }
    })
}

        当然，如果另起一个页面的话，可以在content中使用iframe标签，type：2，如果不想新增页面，则可以直接在content添加输入框。

        嗯，房子有了，现在开始装修。既然是输入密码的二次验证，那确定按钮就要去实现这个功能，使用ajax。

yes:function(){
    $.ajax({
        url: checkPwdUrl,
        type:"post",
        data:'password=' + $('#password').val(),
        success:function (data){
            if(data.success){
                //do something
                changeStatus(id,status);
            }
        }
    })
}

如此，就可以只有验证成功才能进行后面的操作了。

如果需要对弹出框的背景进行变更，可以直接在style中添加。

<style>
    .layui-layer{
        background: url("../../../Content/images/Home/bg_login_modifyAccount.png") no-repeat;
    }
</style>

        哦，对了。如果使用layer.open时，可以添加btn:['确定']用于指定按钮的个数与名称，以及使用btn1:function(){}用于替代yes:function(){}，毕竟使用yes:function(){}需要手动关闭弹出层，因此需要function(index,layero){layer.close(index);}关闭当前弹出层。而使用btn1:function(){}则会自动关闭当前弹出层。

        如还有其他问题也可评论告知，一起学习。