您的位置：首页 > 其它

点击按钮，弹出对话框

2016-07-03 19:52 330 查看

html代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<button id="show">点我1</button>
<div class="wrapper">
<div class="inner">
<div class="box">
<div class="top">
<span>我是标题1</span>
<button class="close">x</button>
</div>
<p>我是内容1</p>
<p>我是内容1</p>
<div class="bottom">
<button class="agree">确定</button>
<button class="cancle">取消</button>
</div>
</div>
</div>

</div>
</body>
</html>

CSS代码：

*{
margin:0;
padding:0;
}
.wrapper{
width:100%;
background:rgba(0,0,0,0.3);
height:400px;
position: absolute;
top:0;
display: none;
}
.active{display: block;}
.inner{
width:280px;
height:130px;
position: absolute;
top:50%;
left:50%
}
.box{
background:#fff;
border:1px solid #aaa;
border-radius:8px;
width:280px;
height:130px;
position: relative;
top:-50%;
left:-50%;
}
.box button{
border:none;
background:none;
float:right;
font-size:18px;
}
.top{
padding:10px;
border-bottom:1px solid #ccc;
}
p{
margin:10px;
}
.bottom{padding-right:10px}

JS代码：

var show = document.getElementById('show')
var box = document.querySelector('.wrapper')
show.addEventListener('click',function(){
box.setAttribute('class','wrapper active')
})
var close = document.querySelector('.close')
var cancle = document.querySelector('.cancle')
close.addEventListener('click',function(){
box.setAttribute('class','wrapper')
})
cancle.addEventListener('click',function(){
box.setAttribute('class','wrapper')
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航