javascript 模拟弹窗
2016-12-07 本文已影响35人
何必自找失落_
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟弹出层</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
body,html{
width: 100%;
height: 100%;
overflow-x: hidden;
}
#demo{
width: 436px;
margin: 30px auto;
overflow: hidden;
}
.btn{
width: 196px;
margin: 10px;
}
/* 弹窗的样式 */
p{
padding: 0px;
margin: 0px;
}
#model {
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.6;
filter: alpha(opacity=60);
position: absolute;
left: 0px;
top: 0px;
}
#modelCont{
padding: 5px 2px;
opacity: 1;
filter: alpha(opacity=100);
width: 600px;
background-color: #fff;
border-radius: 4px;
position: absolute;
top: 100px;
left:50%;
margin-left: -300px;
z-index: 2;
}
#modelCont h2{
font: 18px/30px "微软雅黑";
margin:0px 0px 5px 0px;
color: #666;
text-align: center;
}
#modelCont .foot{
text-align: center;
border-top: 1px solid #ccc;
color: #5cb85c;
line-height: 30px;
cursor: pointer;
}
#modelCont .foot span{
width: 297px;
display: inline-block;
margin: 2px 0px;
}
#modelCont .foot span.left{
border-right: 1px solid #ccc;
}
#modelCont .body{
padding: 5px 10px;
line-height: 24px;
}
</style>
</head>
<body>
<div id="demo">
<div>
<button class="btn btn-default" onclick="Module.show('我是默认弹窗')">默认弹窗</button>
<button class="btn btn-primary" onclick="Module.show('我是confrim弹窗','confrim')">confrim弹窗</button>
</div>
<div>
<button class="btn btn-info" onclick="Module.show('我是alert弹窗')">alert弹窗</button>
<button class="btn btn-success" onclick="Module.show('我是延迟弹窗','time')">延迟关闭弹窗</button>
</div>
</div>
<script type="text/javascript">
// window.onload = function (){
// Module.show("我是弹窗的主题内容我是弹窗的主题内容我是弹窗的主题内容我是弹窗的主题内容我是弹窗的主题内容","confrim");
// }
var Module = {
show : function (val,pro){
this.hide();
var body = document.body;
var model = document.createElement("div");
model.id = "model";
var innerArr = [];
var modelCont = document.createElement("div");
modelCont.id = "modelCont";
innerArr.push("<h2>弹出层</h2>");
innerArr.push("<div class='body'>")
innerArr.push("<p>"+val+"</p>")
innerArr.push("</div>");
if (pro == 'time') {
setTimeout(function(){
//这里使用this不可以！
Module.hide();
},3000)
}else if(pro == "confrim"){
innerArr.push("<div class= 'foot'>")
innerArr.push("<span class='left' onclick='Module.comfirmFalse()'>取消</span><span onclick='Module.comfirmTrue()'>确定</span>")
innerArr.push("</div>");
}else{
innerArr.push("<div class= 'foot'>")
innerArr.push("<p onclick='Module.hide()'>确认</p>")
innerArr.push("</div>");
}
modelCont.innerHTML = innerArr.join("");
body.appendChild(modelCont);
body.appendChild(model);
},
hide : function (){
var body = document.body;
var model = document.getElementById("model");
var modelCont = document.getElementById("modelCont");
if (model) {
body.removeChild(model);
body.removeChild(modelCont);
}
},
comfirmTrue : function (){
this.hide();
return true;
},
comfirmFalse : function (){
this.hide();
return false;
}
}
</script>
</body>
</html>
