自定义alert
2019-09-27 本文已影响0人
无疆wj
<!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>Document</title>
<style>
body {
background-color: #889977;
}
</style>
</head>
<body>
<div onclick="newAlert({text:'文本信息文本信息文本信息文本信息文本信息'})">点击alert</div>
</body>
<script>
function newAlert({ backgroundColor = "#fff", text = "" }) {
let alertEl = document.querySelector('#newAlert')
if (!alertEl) {
let alertEle = `
<style>
.alert-shade {
position: fixed;
top: 0;
left: 0;
z-index: 99999;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.alert-box {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 200px;
background-color: ${backgroundColor};
border-radius: 10px;
font-size: 14px;
padding: 10px;
box-sizing: border-box;
}
.alert-box .alert-title {
font-size: 16px;
font-weight:700
margin: 0;
margin-top: 10px;
}
.alert-btn {
background-color: #d34135;
color: #fff;
width: 70px;
height: 40px;
line-height: 40px;
margin: 0 auto;
margin-top: 10px;
border-radius: 5px;
}
.alert-content {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0;
}
.alert-text{
margin:0;
width:calc(100% - 32px);
text-align:center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
<div class="alert-shade">
<div class="alert-box">
<p class="alert-title">提示</p>
<div class="alert-content">
<p class="alert-text">${text}</p>
</div>
<div class="alert-btn" onclick="document.querySelector('#newAlert').style.display='none'">确定</div>
</div>
</div>
`
let newAlertElement = document.createElement("div");
newAlertElement.setAttribute("id", "newAlert");
newAlertElement.innerHTML = alertEle;
document.querySelector('body').appendChild(newAlertElement);
} else {
alertEl.style.display = 'block';
}
}
</script>
</html>
压缩版
function newAlert({ backgroundColor = "#fff", text = "" }) { let alertEl = document.querySelector('#newAlert'); if (!alertEl) { let alertEle = `<style>.alert-shade{position:fixed;top:0;left:0;z-index:99999;width:100%;height:100%;background:rgba(0, 0, 0, 0.5)}.alert-box{position:absolute;top:30%;left:50%;transform:translate(-50%, -50%);text-align:center;width:200px;background-color:${backgroundColor};border-radius: 10px;font-size: 14px;padding: 10px;box-sizing: border-box}.alert-box .alert-title{font-size:16px;font-weight:700;margin:0;margin-top:10px}.alert-btn{background-color:#d34135;color:#fff;width:70px;height:40px;line-height:40px;margin:0 auto;margin-top:10px;border-radius:5px}.alert-content{width:100%;display:flex;justify-content:center;align-items:center;padding:10px 0}.alert-text{margin:0;width:calc(100% - 32px);text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}</style><div class=alert-shade><div class=alert-box><p class=alert-title>提示</p><div class=alert-content><p class=alert-text>${text}</p></div><div class=alert-btn onclick="document.querySelector('#newAlert').style.display='none'">确定</div></div></div>`; let newAlertElement = document.createElement("div"); newAlertElement.setAttribute("id", "newAlert"); newAlertElement.innerHTML = alertEle; document.querySelector('body').appendChild(newAlertElement); } else { alertEl.style.display = 'block'; } }
