由于原生js的alert样式有限，而且会在头上显示网址，在实际项目中效果很不好，所以下面会采用bootstrap的Modal（模态框）重新封装一下。
采用cdn引入只是为了方便，实际项目中是直接引入下载的资源，由于bootstrap依赖jquery，所以需要引入jquery的包。
bootstrap有自己的方法和事件，可以通过回调函数来扩展自己的响应事件
https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
具体代码：
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>alert</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<style type="text/css">
#confirm{
width:200px;
height: 30px;
margin: 100px;
background-color: #20ae34;
border-color: #20ae34
}
</style>
</head>
<body>
<button id='confirm' onclick="addComfirmEvent()">确定</button>
<script src="./index.js"></script>
</body>
</html>
- js
function addComfirmEvent(){
alertMessage('success','操作成功！',true,function(status){
if(status){
console.log('comfirm')
}
})
}
function alertMessage(className,val,callback){
var background;
var mess;
var closeName;
var timeNum = 2000;
$('#alert-Modal-mess').remove();
$('.modal-backdrop').css('display','none')
if(className=='success'){
closeName = '我知道了';
background = 'background-color:#07fc55';
}
mess = val
var content = '<div id="alert-Modal-mess">';
content += '<div class="modal fade" id="alert_Modal" tabindex="-1" style="top:30%;" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">';
content += ' <div class="modal-dialog" role="document">'
content += ' <div class="modal-content">'
content += ' <img src="./imgs/'+ className +'.png" width="60" height="60" alt=""'
content += ' style="position: absolute;top:20px;left: 44%;">'
content += ' <div class="modal-body">'
content += ' <div style="color:#333;margin: 80px 0 30px 0;text-align: center;">' + mess +'</div>'
content += ' <button id="close_btn" type="button" data-dismiss="modal"'
content += ' style="width: 200px;margin-left:32%;padding-top:8px;padding-bottom: 8px;color:#fff;border:none;text-shadow: none;opacity:1;font-weight: normal;font-size:16px;'+background+'">';
content += closeName + '</button>';
content += ' </div>'
content += ' </div>'
content += ' </div>'
content += '</div>'
content += '</div>'
$(document.body).append(content);
$('#alert_Modal').modal('show');
$('#alert_Modal').on('hide.bs.modal', callback)
}
function closeModal() {
$('#alert_Modal').modal('hide');
$('#alertMessage').alert('close');
}
-
效果
提示框
