效果如图
<!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>Alert</title>
<style type="text/css">
html {
font-size: 14px;
}
* {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin-left: 10%;
margin-top: 50px;
list-style-type: none;
border: 1px solid #eee;
border-radius: 4px;
overflow: hidden;
}
.button {
width: 100%;
height: 2.2rem;
text-align: center;
line-height: 2.2rem;
box-sizing: border-box;
color: #fff;
background: #E37EFC;
cursor: pointer;
}
.button:hover {
background: #D334FF;
}
.container li:nth-child(1),
.container li:nth-child(2) {
border-bottom: 1px solid #eee;
}
.title_container {
position: absolute;
left: 50%;
transform: translateX(-50%);
line-height: 100%;
padding: 4px 8px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 7rem;
max-width: 80%;
height: 2.4rem;
line-height: 2.4rem;
background: #000;
color: #fff;
border-radius: 4px;
opacity: 0.5;
z-index: 9999 !important;
}
.button_mask {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 9998 !important;
background: #000;
opacity: 0.3;
}
.button_container {
position: absolute;
left: 50%;
transform: translateX(-50%);
padding: 0;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 14rem;
height: 8rem;
line-height: 4rem;
border-radius: 4px;
z-index: 9999 !important;
background: #fff;
box-sizing: content-box;
}
.button_container_title,
.button_container_content,
.button_container_buttons {
width: 100%;
padding: 0px;
text-align: center;
box-sizing: border-box;
}
.button_container_title {
height: 3rem;
line-height: 3rem;
}
.button_container_buttons {
height: 2.7rem;
line-height: 2.7rem;
}
.button_container_content {
height: 2.4rem;
line-height: 2.4rem;
border-bottom: 1px solid #eee;
clear: both;
}
.button_container_buttons_left,
.button_container_buttons_right {
float: left;
width: 50%;
text-align: center;
cursor: pointer;
}
.button_container_buttons_left:hover,
.button_container_buttons_right:hover {
background-color: #E37EFC;
color: #fff;
}
.button_container_buttons_right {
box-sizing: border-box;
border-left: 1px solid #eee;
}
.notification_container {
position: fixed;
right: 0px;
top: 12rem;
margin: 0;
padding: 0;
width: 14rem;
}
.notification {
position: relative;
right: -400px;
top: 0px;
margin: 0;
padding: 0;
width: 100%;
height: 8rem;
border-radius: 4px;
border: 1px solid #ccc;
background: #E37EFC;
color: #fff;
margin-top: 16px;
text-align: center;
line-height: 8rem;
}
.notification_close {
position: absolute;
right: 10px;
top: 4px;
cursor: pointer;
width: 1.4rem;
height: 1.4rem;
border-radius: 0.7rem;
line-height: 1.4rem;
background: #fff;
color: #D334FF;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<ul class="container">
<li class="button">Title</li>
<li class="button">Button</li>
<li class="button">Notification</li>
</ul>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var typeCodes = ["Title", "Button", "Notification"]
function init(title) {//监听初始化
$(".button").on("click", function () {
createAlert(typeCodes[$(this).index()], "title");
})
}
function createAlert(type, title) {
let deviceHeight = window.innerHeight;
if (type === "Title") {
titleInit(title)
} else if (type === "Button") {
buttonInit(title);
} else if (type === "Notification") {
notificationInit(5);
}
}
function titleInit(title) {//title类型初始化
$("body").append(
`<div class="title_container" style="top:${(innerHeight - (14 * 2.4)) / 2}px;">${title}</div>`
);
$(".title_container").animate({ opacity: 0 }, 2500, function () {
$(this).remove();
})
}
function buttonInit(title) {//button类型初始化
$("body").append(
`<div class="button_mask"></div>`
);
$("body").append(
`<div class="button_container" style="top:${(innerHeight - (14 * 8)) / 2}px;">
<div class="button_container_title">Alertjs提示</div>
<div class="button_container_content">欢迎使用alertjs</div>
<div class="button_container_buttons">
<div class="button_container_buttons_left">确定</div>
<div class="button_container_buttons_right">取消</div>
</div>
</div>`
);
$('.button_mask').on('click', function (e) {
$(this).animate({ opacity: 0 }, 500, function () {
$(this).remove();
});
$(".button_container").animate({ opacity: 0 }, 500, function () {
$(".button_container").remove();
});
})
$('.button_container_buttons_right').on('click', function (e) {
$(".button_mask").animate({ opacity: 0 }, 500, function () {
$(".button_mask").remove();
});
$(".button_container").animate({ opacity: 0 }, 500, function () {
$(".button_container").remove();
});
})
}
function notificationInit(num, duration, playDuration) {//notification类型初始化
$('body').append(`<div class='notification_container'>
<div class='notification'>
<div class='notification_close'>x</div>
HELLO NOTIFICATION
</div>
</div>`);
setTimeout(function () {
$('.notification').animate({ right: "10px" }, function () {
var that = this;
setTimeout(function () {
$(that).animate({ height: "0px", opacity: 0.3 }, function () {
$(this).remove();
});
}, duration ? duration : 5000);
});
$('.notification_close').on('click', function (e) {
$(e.target).parent().animate({ height: "0px", opacity: 0.3 }, function () {
$(this).remove();
});
})
}, playDuration ? playDuration : 0);
}
init("HELLO ALERT");
})
</script>
</body>
</html>
因为是半小时内完成的，所以有部分展示内容是写死的，如果要参考请改一下参数即可
