用到了layer插件，https://layer.layui.com/ 在该连接下下载layer相关文件
rem.js 在手机端页面的布局 下载
例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>密码修改</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="format-detection" content="telephone=no, email=no"> </head> <link rel="stylesheet" href="css/public.css" /> <link rel="stylesheet" href="css/layer.css" /> <link rel="stylesheet" href="css/changePassword.css" /> <body> <nav> <div class="navs"> <div class="perss nleftimg"> <a href="modifyPassword.html"><img src="images/back.png" /></a> </div> <div class="perss personal"> <h1>修改密码</h1> </div> <div class="perss nrightimg"></div> </div> </nav> <center> <div class="center"> <form action="" method="post" class="loginform" enctype="multipart/form-data" name="biaodan"> <div class="passwannpas"> <h4>原密码</h4> </div> <div class="passwannpas"> <input type="password" class="passwords" id="inputPassword" /> </div> <div class="passwannpas"> <h4>新密码</h4> </div> <div class="passwannpas"> <input type="password" class="newspassword" /> </div> <div class="passwannpas"> <h4>确认密码</h4> </div> <div class="passwannpas"> <input type="password" class="aginpassword" /> </div> </form> <div class="passwordbuttn"> <input type="button" value="完 成" class="passinbut"/> </div> </div> </center> </body> <script type="text/javascript" src="js/rem.js" ></script> <script type="text/javascript" src="../bootstrap/js/jquery-2.1.1.min.js" ></script> <script type="text/javascript" src="../bootstrap/js/layer.js" ></script> <script type="text/javascript" src="js/changePassword.js" ></script> </html>
js:
$(function (){ $(".passinbut").click(function(){ var id=getCookie("id"); var password=$(".aginpassword").val(); var ypassword=$("#inputPassword").val(); var npassword=$(".newspassword").val(); if(password=='' || password==null && ypassword=='' || ypassword==null && npassword=='' || npassword==null){ layer.msg('密码不能为空'); }else{ oldPassword(id,ypassword) } }); }) //原码判断 function oldPassword(id,ypassword){ $.ajax({ url:"/hospitalmanage/user/getuserpas.do", type:"post", dataType:"json", data:{ "id":id, "password":ypassword }, success:function(data){ console.log(data) if(data.data==true){ passSubmission(); }else{ layer.msg('原密码有误'); return } } }); } //新码判断 function passSubmission(){ var id=getCookie("id"); var password=$(".aginpassword").val(); var npassword=$(".newspassword").val(); if(password != npassword){ layer.msg('两次密码输入不一致！'); return; }else{ loadingSubmission(id,password); } } function loadingSubmission(id,password){ $.ajax({ url:"/hospitalmanage/user/alertpas.do", type:"post", dataType:"json", data:{ "num":id, "password":password }, success:function(data){ if(data.state==0){ layer.confirm('密码修改成功', { btn: ['确定'] //按钮 }, function(){ window.history.back(-1); }); $(".aginpassword").val(""); $(".newspassword").val(""); $("#inputPassword").val(""); }else{ layer.msg('密码修改失败'); } } }); }
css:
center{ width: 100%; height:100%; background: white; padding-top: 1rem; } .center{ width: 7.5rem; height: 100%; margin:0 auto; } .loginform{ margin:0 0.4rem; } .login{ height: 1.5rem; display: -webkit-flex; display: flex; align-items: center; } .login h1{ font-size: 0.5rem; font-weight: bolder; } .passwannpas{ display: -webkit-flex; display: flex; align-items: center; } .passwannpas h4{ font-size: 0.3rem; color:#999999; margin: 0.7rem 0 0 0; } .passwannpas input{ width: 8.94rem; padding: 0.15rem; height: 0.30rem; font-size: 0.3rem; border-top: none; border-left: none; border-right: none; border-bottom:0.01rem solid #e1e1e1; } .passwordbuttn{ display: -webkit-flex; display: flex; flex-wrap: wrap; align-content: center; margin-top: 1.5rem; width:7.5rem; } .passinbut{ width: 6.70rem; height: 0.67rem; background: white; border: 0.01rem solid #00a09d; color: #00a09d; font-size: 0.3rem; margin:0 auto; }