用到了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; }