话不多说直接上代码，先是css文件的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding:0;margin:0;
}
.ios-alert-wrap{
background-color:rgba(0,0,0,0.3);
position:fixed;
left:0;top:0;
height:100%;width:100%;
}
.ios-alert-panel{
position: fixed;
z-index: 9999;
left:50%;
top:50%;
min-width: 250px;
max-width: 280px;
background: #fff;
border-radius: 10px;
text-align:center;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.ios-alert-panel .ios-alert-header{
padding: 18px;
border-bottom: 1px solid #eee;
}
.ios-alert-panel .ios-alert-header h4{
font-size:16px;
margin-bottom: 5px;
color:#000;
}
.ios-alert-panel .ios-alert-header p{
font-size:14px;
color:#000;
}
.ios-alert-panel .ios-alert-footer {
}
.ios-alert-panel .ios-alert-footer .ios-alert-confirm{
font-size: 14px;
color: #017aff;
display: block;
text-decoration: none;
flex: 1;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<script>
function removeAlert(){
let list = document.getElementsByClassName('ios-alert-wrap');
for(let i=0;i<list.length;i++){
document.getElementsByTagName('body')[0].removeChild(list[i]);
};
}
function iosAlert(title,content){
title = typeof(title)=='undefined'?'提示':title;
content = typeof(content)=='undefined'?'':content;
let div = document.createElement("div");
div.className = 'ios-alert-wrap';
div.innerHTML = `
<div class="ios-alert-panel">
<div class="ios-alert-header">
<h4>${title}</h4>
<p>${content}</p>
</div>
<div class="ios-alert-footer">
<a class="ios-alert-confirm" href="javascript:removeAlert();">确认</a>
</div>
</div>`;
document.getElementsByTagName("body")[0].appendChild(div);
}
window.onload = function(){
iosAlert('提示','这是内容先学这是内容先学这是内容先学这是内容先学这是内容先学这是内容先学这是内容先学');
}
</script>
</body>
</html>
下一步是.html文件代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./ios-alert.css">
</head>
<body>
<script>
function removeAlert(){
let list = document.getElementsByClassName('ios-alert-wrap');
for(let i=0;i<list.length;i++){
document.getElementsByTagName('body')[0].removeChild(list[i]);
};
}
function iosAlert(title,content){
title = typeof(title)=='undefined'?'提示':title;
content = typeof(content)=='undefined'?'':content;
let div = document.createElement("div");
div.className = 'ios-alert-wrap';
div.innerHTML = `
<div class="ios-alert-panel">
<div class="ios-alert-header">
<h4>${title}</h4>
<p>${content}</p>
</div>
<div class="ios-alert-footer">
<a class="ios-alert-confirm" href="javascript:removeAlert();">确认</a>
</div>
</div>`;
document.getElementsByTagName("body")[0].appendChild(div);
}
window.onload = function(){
iosAlert('提示','这是内容先学这是内容先学这是内容先学这是内容先学这是内容先学这是内容先学这是内容先学');
}
</script>
</body>
</html>
网友评论