js 轻提示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			@keyframes show {
			    0% {
			        opacity: 0;
			    }
			    100% {
			        opacity: 1;
			    }            
			}
			@keyframes hide {
			    0% {
			        opacity: 1;
			    }
			    100% {
			        opacity: 0;
			    }
			} 
			.toast_box {
			    /* width: 100%; */
			    position: absolute;
			    bottom: 50%;
				left: 50%;
			    /* justify-content: center; */
				z-index: 10;
				transform: translate(-50%, -50%);
			    display: none;
			}
			.toast_box p {
			    box-sizing: border-box;
			    padding: 10px 20px;
			    width: max-content;
				/* 提示框的背景色 */
			    background: #707070;
			    color: #fff;
			    font-size: 16px;
			    text-align: center;
			    border-radius: 6px;
			    opacity: 0.8;
			} 
			.toliet{
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="hotal">
			<!-- 提示框 -->
			<div class="toast_box">
			    <p id="toast"></p>
			</div>
			<button id="toliet" type="button" onclick="correct()">正常</button>
			<button id="toliet" type="button" onclick="warning()">警告</button>
			<button id="toliet" type="button" onclick="error()">报错异常</button>
		</div>
		<script type="text/javascript">
			//形参分别是: 提示内容,停留时间时间
			function toast(text, time) {
			    let toast = document.getElementById('toast');
			    let toast_box = document.getElementsByClassName('toast_box')[0];
			    toast.innerHTML = text;
			    toast_box.style.animation = 'show 1.5s'
			    toast_box.style.display = 'inline-block';
				setTimeout(function(){
					toast_box.style.animation = 'hide 1.5s'
					setTimeout(function(){
						toast_box.style.display = 'none';
					}, 1400)
				}, time)   
			}
			//调用
			function correct(){
				toast("is ok!",5000);
			}
			function warning(){
				toast("异常提醒",3000);
			}
			function error(){
				toast("报错",3000);
			}
		</script>
	</body>
</html>

js 遮罩层弹出表单

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title></title>
    <body>
        <style type="text/css>
            #dialogBg3{
                width:100%;
                height:100%;
                background-color:#000000;
                opacity:.8;
                filter:alpha(opacity=60);
                position:fixed;
                top:0;
                left:0;
                z-index:9999;
                display:none;
            }
            #dialog3{ 
                width: 70%; 
                height: 500px; 
                margin: 0 auto; 
                display: none; 
                background-color: #ffffff; 
                position: fixed;
                top: 45%;
                left: 50%;
                transform: translate(-50%, -50%);
                /* margin: -120px 0 0 -150px; */
                z-index: 10000; 
                border: 1px solid #ccc; 
                border-radius: 10px; 
                -webkit-border-radius: 10px; 
                box-shadow: 3px 2px 4px rgba(0,0,0,0.2); 
                -webkit-box-shadow: 3px 2px 4px rgba(0,0,0,0.2); 
                background-image: linear-gradient(#F9E2C3, #fff5e6);
            }
            .dialogTop3{
                width:90%;
                margin:0 auto;
                border-bottom:1px dotted #ccc;
                letter-spacing:1px;
                padding:10px 0;
                text-align:right;
                position: relative;
            }
            .submitImg {
                position: absolute;
                top: -180px;
                left: 50%;
                transform: translate(-50%, 80px);
            }
            .claseDialogBtn3 {
                position: absolute;
                top: -80px;
                right: -80px;
            }
            .dialogIco3{
                width:50px;
                height:50px;
                position:absolute;
                top:-25px;
                left:50%;
                margin-left:-25px;
            }
        </style>
        <div id="dialogBg3"></div>
		<div id="dialog3" class="animated3">
			<div class="dialogTop3">
				<image class="claseDialogBtn3" src="./image/backBtn.png"></image>
			</div>
			<p style="text-align: center; font-size: 36px; color: #671404; margin: 80px auto;">提交失败</p>
			<p style="text-align: center; margin: 30px 0 60px 0; font-size: 28px; line-height: 41px; letter-spacing: 2px; padding-left: 40px; padding-right: 40px;">您的报名提交失败！请重新提交</p>
			<div style="margin-top: 120px; position: relative;" onclick="submitData()">
				<image width="90%;" height="90px" style=" position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" src="./image/submitBtn.png"></image>
				<p onclick="offDialog()" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 32px; color: #fff;">我知道了</p>
			</div>
		</div>
	</body>
    <script type="text/javascript">
        $(function(){
			getSrceenWH();
			//点击触发弹窗
			$('.course3 p').click(function(){
				className = $(this).attr('class');
				$('#dialogBg'3).fadeIn(300);
				$('#dialog3').removeAttr('class').addClass('animated '+className+'').fadeIn();
			});
			//关闭弹窗
			$('.claseDialogBtn3').click(function(){
				$('#dialogBg3').fadeOut(300,function(){
					$('#dialog3').addClass('bounceOutUp3').fadeOut();
				});
			});
        })  
    </script>
</html>

类似于微信的时间格式转换