带按钮的弹出框
HTML部分CSS样式JS部分效果图补充知识：关于rgba属性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值对应关系如下表所示。
参考文章:
/u012503639/article/details/82285404.
/liona_koukou/article/details/52807050.
