jquery toast

<!doctype html>
<html data-n-head-ssr>
  <head>
    <title>爱游人</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" data-hid="description" name="description" content="My ace Nuxt.js project"><meta data-n-head="ssr" data-hid="keywords" name="keywords" content="计算机软硬件、工艺品(不含象牙及其制品)的销售;计算机软硬件、工艺品(不含象牙及其制品)技术开发、技术推广、技术咨询、技术服务、技术转让;经营电子商务;从事广告业务。(以上不含限制项目)旅游产品代理销售。"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
	</head>
	<style>
	#toast{
    position: fixed;
    top: 50px;left:50%;transform: translateX(-50%);
    min- 80px;
    max- 180px;
    min-height: 18px;
    padding: 15px;
    line-height: 18px;
    text-align: center;
    font-size: 16px;
    border-radius: 5px;
    display: none;
    z-index: 999;
}
.toast_error {
	background:#FEF0F0;
	border:1px solid #FDE2E2;
	color: #F56C6C;
}
.toast_info {
	background:#EDF2FC;
	border:1px solid #EBEEF5;
	color: #909399;
}
.toast_success {
	background:#F0F9EB;
	border:1px solid #E1F3D8;
	color: #67C23A;
}
.toast_warning {
	background:#FDF6EC;
	border:1px solid #FAECD8;
	color: #E6A23C;
}

	</style>
  <body>

		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
			/* toast 提示 
				 $("#toast").showMessage('网络错误,请稍后重试',1400);
			*/
			$.fn.extend({
						showMessage: function( $msg, $type, $time ){
								var oDiv = document.createElement("div");
								oDiv.setAttribute("id", "toast");
								oDiv.setAttribute("class", 'toast_' + $type || 'toast_' + 'info');
								var oBody = document.getElementsByTagName('body')[0];
								oBody.append(oDiv);
								$('#toast').text( $msg );
								$('#toast').fadeIn();
								setTimeout(function() {
										$('#toast').fadeOut();
								}, $time);
						}
			});
			$.fn.showMessage('asdfsd', 'error', 50000)
			$.fn.showMessage('asdfsd', 'warning', 50000)
		

</script>
  </body>
</html>

  

原文地址:https://www.cnblogs.com/qq364735538/p/12973815.html