方法一
自定义弹出框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PopAlert</title>
<link rel="stylesheet" href="res/Alert.css">
</head>
<body>
<input type="button" value="SHOW" id="show">
</body>
<script>
//绑定事件
var showBtn = document.getElementById("show");
// var cover = document.getElementsByClassName("cover")[0];
showBtn.onclick = function(){
var cover = document.createElement("div");
cover.className = "cover";
// cover.style.display = "block";
// 1.创建弹出层
var html = '<div class="alert">';
html += '<div class="content"></div>';
html += '<div class="tool">';
html += '<input type="button" value="Ok">';
html += '<input type="button" value="Cancel" id="cancel">';
html += '</div></div>';
cover.innerHTML = html;
// appendChild可以在DOM对象后面追加其他的DOM内容
document.body.appendChild(cover);
adjust();
}
function adjust(){
var cover = document.getElementsByClassName("cover")[0];
// 2.让弹出层出现在合适的位置
cover.style.width = window.innerWidth+"px";
cover.style.height = window.innerHeight+"px";
var alertDiv = document.getElementsByClassName("alert")[0];
alertDiv.style.marginTop = -(alertDiv.offsetHeight/2)+"px";
alertDiv.style.marginLeft = -(alertDiv.offsetWidth/2)+"px";
}
window.onresize = function (){
adjust();
}
// var cancel = document.getElementById("cancel");
// cancel.onclick = function(){
// cover.style.display = "none";
// }
</script>
</html>
Alert.css
* {
padding: 0;
margin: 0;
}
.cover {
position: fixed;
100%;
background: rgba(100,100,100);
z-index: 999;
top: 0;
left: 0;
/*display: none;*/
}
.alert {
border-radius: 8px;
border: 8px purple solid;
300px;
height: 150px;
top: 50%;
left: 50%;
position: absolute;
background: cyan;
text-align: center;
}
.content {
padding: 25px 15px;
}
.tool {
100%;
padding: 15px 0;
background: yellow;
text-align: right;
position: absolute;
bottom: 0;
}
.tool input {
50px;
height: 25px;
margin-right: 15px;
background: green;
border: none;
}
方法二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PopAlert</title>
<link rel="stylesheet" href="res/Alert.css">
</head>
<body>
<input type="button" value="SHOW" id="show">
</body>
<script>
function PopAlert(c){
this.cover = document.createElement("div");
this.cover.className = "cover";
// cover.style.display = "block";
// 1.创建弹出层
var html = '<div class="alert">';
html += '<div class="content">'+c+'</div>';
html += '<div class="tool">';
html += '<input type="button" value="Ok">';
html += '<input type="button" value="Cancel" id="cancel">';
html += '</div></div>';
this.cover.innerHTML = html;
this.ajdust = function(){
// 2.让弹出层出现在合适的位置
this.cover.style.width = window.innerWidth+"px";
this.cover.style.height = window.innerHeight+"px";
this.alert.style.marginTop = -(this.alert.offsetHeight/2)+"px";
this.alert.style.marginLeft = -(this.alert.offsetWidth/2)+"px";
}
this.show = function(){
// appendChild可以在DOM对象后面追加其他的DOM内容
document.body.appendChild(this.cover);
this.alert = document.getElementsByClassName("alert")[0];
this.ajdust();
}
this.close = function(){
document.body.removeChild(this.cover);
}
}
//绑定事件
var showBtn = document.getElementById("show");
var popAlert = null;
showBtn.onclick = function(){
popAlert = new PopAlert("你好么？");
popAlert.show();
// //
// popAlert.close();
}
window.onresize = function (){
if (popAlert) {
popAlert.ajdust();
}
}
</script>
</html>