弹出框实现

今个因为项目要用弹出框，没有合适的就自己写，原理简单，写一个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>

 

posted @ 2019-12-12 08:59  千金一发  阅读(114)  评论(0)  编辑  收藏  举报