console
var button = document.getElementById('btn');
button.addEventListener('click', function(e) {
if (e.target.tagName == 'BUTTON') {
document.getElementById('imgModal').style.display = 'block';
}
})
<button id="btn">点击展开弹窗</button>
<div id="imgModal" class="modal-bg">
<div class="modal">
<div class="modal-body">
<div class="modal-title clearfix">
<h3 class="fl">上传图片</h3>
<span class="fr close">+</span>
</div>
<div class="modal-content clearfix">
<ul id="js-list" class="clearfix">
<li id="js-add"></li>
</ul>
</div>
<div class="modal-footer clearfix">
<input type="button" class="btn btn-primary" value="上传" />
<input type="button" class="btn btn-default" value="取消" />
</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
}
#btn {
margin: 50px;
}
.clearfix {
zoom: 1;
}
.clearfix::after {
display: block;
overflow: hidden;
content: "";
height: 0;
}
.fl {
float: left;
}
.fr {
float: right;
}
.modal-bg {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #eee;
opacity: 0.7;
}
.modal {
position: relative;
width: 100%;
height: 100%;
}
.modal-body {
position: absolute;
width: 668px;
height: 608px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ccc;
border-radius: 5px;
background: #fff;
}
.modal-title {
padding: 15px 20px;
height: 20px;
line-height: 20px;
border-bottom: 1px solid #ccc;
}
.modal-title h3 {
display: inline-block;
text-align: center;
width: 80px;
height: 35px;
font-size: 1em;
color: red;
border-bottom: 1px solid red;
}
.modal-title .close {
font-size: 20px;
font-weight: bold;
color: #333;
transform: rotate(45deg);
}
ul {
list-style: none;
}
li {
display: inline-block;
width: 110px;
height: 110px;
margin: 20px;
background: url("https://p1.pstatp.com/large/3ecd0004b6bdeff4c48d") no-repeat center;
border: 1px solid #ccc;
cursor: pointer;
}
.modal-content {
min-height: 476px;
}
.modal-footer {
height: 50px;
padding: 15px 50px;
border-top: 1px solid #ccc;
text-align: center;
}
.modal-footer:first-child {
margin-right: 15px;
}
.btn {
display: inline-block;
height: 36px;
padding: 5px 30px;
background: #fff;
color: #333;
border: 1px solid #ccc;
border-radius: 2px;
cursor: pointer;
}
.btn-primary {
background: red;
color: #fff;
margin-right: 15px;
}
.btn-default {
background: #ccc;
color: #333;
}