后端修改密码的简单弹窗

来源：互联网发布：逆战刷箱子淘宝编辑：程序博客网时间：2024/05/16 08:19
后台的小伙，因为前端的功底不是很好，在做后台时，遇到一个修改的密码的弹窗不会弄，找到我，特意为其写了个demo
<!DOCTYPE html><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>
阅读全文
0 0