<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ShowToast</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<style>
#showToastWraper {
position: fixed;
z-index: 999;
top: 35%;
right: 0;
left: 0;
90%;
margin: auto;
background: rgba(0, 0, 0, 0.6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000);
text-align: center;
padding: 10px 20px;
color: #dcdcdc;
border-radius: 50px;
}
</style>
</head>
<body>
<button id="show" class="btn btn-primary">showToast</button>
<script>
function showToast(text, width, radius) {
var widthDiv = width ? width : '90%';//自定义宽度
var radiusDiv = radius ? radius : '50px';//自定义边框角度
//此处你还可以定义 位置、文字颜色大小、背景色、显示时长等等
var showToastDiv = "<div id='showToastWraper'></div>";
var showToastWraper = $("#showToastWraper");
var isExat = showToastWraper.length;
if (!isExat) {
//第一次创建元素 并且设置元素把显示状态的停止掉、渐隐显示、显示文本内容、设置自定义样式、1.5s后渐隐消失
$(document.body).append(showToastDiv);
$("#showToastWraper").stop().fadeIn(300).html(text).css({ widthDiv, borderRadius: radiusDiv }).delay(1500).fadeOut(500);
} else {
//第二次 就不需要创建元素了减少dom操作
showToastWraper.stop().fadeIn(300).html(text).css({ widthDiv, borderRadius: radiusDiv }).delay(1500).fadeOut(500);
}
}
$("#show").on("click", function () {
showToast('显示文本内容显显示文本内容显'); //默认显示的样式
// showToast('显示文本内容显显示文本内容显', '90%', '50px'); //可以更改宽度、边框角度等等
})
</script>
</body>
</html>