后端修改密码的简单弹窗

后台的小伙,因为前端的功底不是很好,在做后台时,遇到一个修改的密码的弹窗不会弄,找到我,特意为其写了个demo


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style>
            #updataPwdBox{
                width: 200px;
                height: 200px;
                border: 10px solid cadetblue;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -100px;
                margin-top: -100px;
                display: none;
                z-index: 99999999999;
            }
            #updataPwdBox .udataPwd{
                margin-left:9px;
                margin-top: 10px;
            }
            .btnBox{
                margin:10px auto;
            }
            .close{
                margin-left: 10px;
            }
            .save{
                margin-left: 76px;
            }
        style>
    head>
    <body>
        <div id="updata">点击修改密码div>
        <div class="updataPwdBox" id="updataPwdBox">
            <div class="udataPwd">
                <table for-="username">用户名:table><input type="text" id="username" />
            div>
            <div class="udataPwd">
                <table for="oldpwd">旧密码:table><input type="password" id='oldpwd'/>
            div>
            <div class="udataPwd">
                <table for="newpwd">新密码:table><input type="password"  id="newpwd"/>
            div>
            <div class="btnBox">
                <button class="close" id="close">取消button>
                <button class="save" id="save">保存button>
            div>
        div>
        <script>
            updata.onclick = function(){
                updataPwdBox.style.display = "block";
            }
            var close = document.getElementById('close');
            var save = document.getElementById('save');
            var username = document.getElementById('username');
            var oldpwd = document.getElementById('oldpwd');
            var newpwd = document.getElementById('newpwd');
            close.onclick = function(e){
                username.value='';
                oldpwd.value='';
                newpwd.value='';
                updataPwdBox.style.display = 'none';
            }
            //保存按钮触发事件
            save.onclick = function(){
                //获取用户名
                var usernameval = username.value;
                console.log('用户名:'+usernameval);
                if(usernameval==''){
                    alert('用户名不能为空');
                    return false;
                }

                //获取旧密码
                var oldpwdval  = oldpwd.value;
                if(oldpwdval==''){
                    alert('旧密码不能为空');
                    return false;
                }
                //获取新密码
                var newpwdval = newpwd.value;
                if(newpwdval==''){
                    alert('新密码不能为空');
                    return false;
                }
                console.log('旧密码:'+oldpwdval);
                console.log('新密码:'+newpwdval);
            }
        script>
    body>
html>

你可能感兴趣的:(JavaScript,前端)