HTML+CSS实现带按钮的弹出框 |
您所在的位置：网站首页 › HTML5表单属性弹出提醒 › HTML+CSS实现带按钮的弹出框 |
HTML+CSS实现带按钮的弹出框
|
带按钮的弹出框
HTML部分CSS样式JS部分效果图补充知识：关于rgba属性
HTML部分
弹出
提示
学会制作弹出框了吗？
取消
确认
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()属性是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.1190.2330.34C0.4660.57F0.6990.7B20.8C80.9E5参考文章: https://blog.csdn.net/u012503639/article/details/82285404. https://blog.csdn.net/liona_koukou/article/details/52807050. |
【本文地址】
今日新闻 |
推荐新闻 |