<!doctype html>
<html data-n-head-ssr>
<head>
<title>爱游人</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" data-h>
</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>
