使用js 或者 jquery 实现自定义提示框
js
hint.js
// 创建div
const div = document.createElement('div')
// 给div添加内容
div.innerText = text
// 添加样式
const divStyle = `
width:380px;
height:50px;
line-height:50px;
text-align: center;
border-radius:4px;
position: absolute;
top: 25px;
left: 50%;
transform: translateX(-50%);
opacity: 1;
transition: opacity .5s;
`
div.setAttribute('style', divStyle);
if (color == 'success') {
div.style.color = '#67C23A'
div.style.background = "#F0F9EB"
} else if (color == 'warning') {
div.style.color = '#E6A23C'
div.style.background = "#FDF6EC"
} else if (color == 'error') {
div.style.color = '#F56C6C'
div.style.background = "#FEF0F0"
} else {
div.style.color = "#909399"
div.style.background = "#F4F4F5"
}
// 创建img
const img = document.createElement('img')
img.src="./images/x.png"
const imgStyle = `
width:12px;
height:13px;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 16px;
cursor: pointer;
`
img.setAttribute('style', imgStyle);
// 在div中添加img
div.appendChild(img)
// 点击图片隐藏div
img.addEventListener('click',()=>{
div.style.opacity = 0
})
let time = 0
let timer = setInterval(()=>{
time++
// 提示框停留时间(秒)
if(time==3){
clearInterval(timer)
div.style.opacity = 0
// 如果不想看动效,可以把定时器去除
setTimeout(()=>{
// 隐藏后把元素删除
div.remove();
},500)
}
},1000)
const body = document.querySelector("body")
body.appendChild(div)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入hint.js文件 -->
<script src="./js/hint.js"></script>
<title>Document</title>
</head>
<body>
<div class="a">
<button id="hints" onclick="but()">获取提示</button>
</div>
<script>
function but(){
console.log('9633');
hint('返回成功','success')
}
</script>
</body>
</html>
jQuery
hint.js
function hint(text,color) {
//创建一个新的div元素
var $div = $("<div></div>").text(text);
var $img = $("<img src='./images/x.png' />");
$img.css({
'width':'12px',
'height':'13px',
'position': 'absolute',
'top': '50%',
'transform': 'translateY(-50%)',
'right': '15px',
'cursor': 'pointer'
})
// 在$div中后追加一个图片
$($div).append($img)
// 点击图片隐藏$div
$img.click(function () {
$div.css('opacity', '0')
});
$div.css({
'width':'380px',
'height':'50px',
'line-height':'50px',
'text-align': 'center',
'border-radius':'4px',
'position': 'absolute',
'top': '25px',
'left': '50%',
'transform': 'translateX(-50%)',
'opacity': '1',
'transition': 'opacity 1s'
})
if(color=='success'){
$div.css("color", "#67C23A");
$div.css("background", "#F0F9EB");
}else if(color=='warning'){
$div.css("color", "#E6A23C");
$div.css("background", "#FDF6EC");
}else if(color=='error'){
$div.css("color", "#F56C6C");
$div.css("background", "#FEF0F0");
}else{
$div.css("color", "#909399");
$div.css("background", "#F4F4F5");
}
let time = 0
let timer = setInterval(()=>{
time++
// 提示框停留时间(秒)
if(time==3){
clearInterval(timer)
$div.css('opacity', '0')
$($div).remove();
}
},1000)
$('body').append($div)
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./js/jquery-3.7.0.min.js"></script>
<!-- 引入hint.js文件 -->
<script src="./js/hint.js"></script>
<title>Document</title>
<style></style>
</head>
<body>
<div class="a">
<button id="hints">获取提示</button>
</div>
<script>
$(()=>{
$('#hints').click(()=>{
// hint(需要提示的内容,类型)
hint('9638200000000','success')
})
})
</script>
</body>
</html>