弹出框

　　　　　　　　方法一

自定义弹出框：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PopAlert</title>
<link rel="stylesheet" href="res/Alert.css">
</head>
<body>

</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>

</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>