带按钮的弹出框
HTML部分
<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>
CSS样式
/* 遮罩层 */
#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;
}
JS部分
function showPopup(){
var overlay = document.getElementById("overlay");
overlay.style.display = "block";
}
function hidePopup(){
var overlay = document.getElementById("overlay");
overlay.style.display = "none";
}
效果图
补充知识:关于rgba属性
rgba()属性是CSS3新增属性。rgba含义:r代表red,g代表green,b代表blue,a代表透明度。rgba(0, 0, 0, 0.5)表示透明度为0.5的黑色。
IE8及以下版本不支持rgba属性,但是支持
filter
属性,因此可以利用filter实现透明度。
filter属性原本是做渐变的,
startColorstr
与endColorstr
参数值形式为#AARRGGBB
,其中AA代表透明程度,RRGGBB就是颜色的十六进制代码。rgba透明值与IEfilter值对应关系如下表所示。
rgba透明度 | IEfilter值 |
---|---|
0.1 | 19 |
0.2 | 33 |
0.3 | 4C |
0.4 | 66 |
0.5 | 7F |
0.6 | 99 |
0.7 | B2 |
0.8 | C8 |
0.9 | E5 |
参考文章:
https://blog.csdn.net/u012503639/article/details/82285404.
https://blog.csdn.net/liona_koukou/article/details/52807050.