<button id="showPopup" onclick="showPopup()">弹出</button>
<div id="overlay">
<div class="popup">
<p class="popup_title">提示</p>
<p class="popup_content">学会制作弹出框了吗?</p>
<div class="popup_btn">
<button class="cancelBtn" onclick="hidePopup()">取消</button>
<button class="confirmBtn" onclick="hidePopup()">确认</button>
</div>
</div>
</div>
/* 遮罩层 */
#overlay {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
font-size: 16px;
/* IE9以下不支持rgba模式 */
background-color: rgba(0, 0, 0, 0.5);
/* 兼容IE8及以下 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
display: none;
}
/* 弹出框主体 */
.popup {
background-color: #ffffff;
max-width: 400px;
min-width: 200px;
height: 240px;
border-radius: 5px;
margin: 100px auto;
text-align: center;
}
/* 弹出框的标题 */
.popup_title {
height: 60px;
line-height: 60px;
border-bottom: solid 1px #cccccc;
}
/* 弹出框的内容 */
.popup_content {
height: 50px;
line-height: 50px;
padding: 15px 20px;
}
/* 弹出框的按钮栏 */
.popup_btn {
padding-bottom: 10px;
}
/* 弹出框的按钮 */
.popup_btn button {
color: #778899;
width: 40%;
height: 40px;
cursor: pointer;
border: solid 1px #cccccc;
border-radius: 5px;
margin: 5px 10px;
color: #ffffff;
background-color: #337ab7;
}
function showPopup(){
var overlay = document.getElementById("overlay");
overlay.style.display = "block";
}
function hidePopup(){
var overlay = document.getElementById("overlay");
overlay.style.display = "none";
}