今个因为项目要用弹出框，没有合适的就自己写，原理简单，写一个div，相对于浏览器窗口定位，初始高度为0，此时不显示，点击按钮给div添加一个高度，赋予动画时间
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #demo{ width: 30vw; height: 0vh; position: fixed; overflow: hidden; left: 35vw; top: 30vh; background-color:#D2E9FF; border-radius: 5px; transition: all 0.5s; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } #title{ width: 28vw; height: 3vh; display: flex; justify-content: flex-start; align-items: center; } .info{ width: 25vw; height: 4vh; display: flex; flex-direction: row; justify-content: space-around; } .info-x{ width: 25vw; height: 12vh; display: flex; flex-direction: row; justify-content: space-around; } .info-title{ width: 4vw; height: 4vh; display: flex; justify-content: flex-end; align-items: center; } .info-text{ width: 18vw; height: 3vh; font-size: 1vw; background-color: #FFFFFF; } .info-textarea{ width: 18vw; height: 8vh; font-size: 1vw; resize: none; } .buton{ width: 5vw; height: 3vh; display: flex; justify-content: center; align-items: center; border-radius: 3px; background-color: #FFFFFF; border: 1px #46A3FF solid ; color: #46A3FF; } /* input::-webkit-outer-spin-button, */ input::-webkit-inner-spin-button { -webkit-appearance: none !important; /* margin: 0; */ } </style> </head> <body> <button type="button" onclick="opendemo()">点击</button> <div id="demo"> <div id="title">添加合伙人</div> <div class="info"> <div class="info-title">姓名</div> <input class="info-text" type="text" name="" id="" value="" /> </div> <div class="info "> <div class="info-title">电话</div> <input type="tel" class="info-text" id="phone" maxlength="11" name="" id="" /> </div> <div class="info"> <div class="info-title">地址</div> <input class="info-text" type="text" name="" id="" value="" /> </div> <div class="info-x"> <div class="info-title">描述</div> <textarea id="text-area" class="info-textarea"></textarea> <!-- <input class="info-text" type="text" name="" id="" value="" /> --> </div> <div class="info"> <button id="sure" class="buton" onclick="sure()" type="button">确定</button> <button id="unsure" class="buton" onclick="unsure()" type="button">取消</button> </div> </div> </body> <script type="text/javascript"> function checkPhone(){ var phone = document.getElementById('phone').value; if(!(/^1[3|4|5|7|8][0-9]{9}$/.test(phone))){ return false; } else{ return true; } } function ClearAll() { var ipts = document.getElementsByTagName("INPUT"); for( var i = 0; i < ipts.length; i++ ) { ipts[i].value = ""; } document.getElementById("text-area").value=""; } function opendemo(){ document.getElementById("demo").style.height="35vh"; } function unsure(){ document.getElementById("demo").style.height="0vh"; ClearAll(); } function sure(){ if(checkPhone()){ alert('提交成功'); document.getElementById("demo").style.height="0vh"; ClearAll(); }else{ alert("手机号码有误，请重填"); } } </script> </html>
