html+css+jquery 实现模态盒（模式窗口对话框）
2021-07-03 21:05
; /*鼠标悬浮时按钮的特效*/ /*设置模态盒*/ /*设置内层的盒子*/ /*模态盒的头部*/ /*头部私有属性*/ /*模态盒的主体部分*/ /*设置关闭按钮*/ .close:hover { /*endregion*/
}
.modal-btn:hover {
cursor: pointer;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.modal {
position: fixed;
/*设置 top 为 0 是为了从最上面开始计算高度（宽度同理）*/
top: 0;
left: 0;
z-index: 1;
/* 宽高最大化（防止点击其他的东西） */
width: 100%;
height: 100%;
" data-mce-style="color: #e8bf6a;">rgba(0, 0, 0, 0.4);
display: none;
}
.modal-content {
position: relative;
max-width: 1000px;
/*设置盒子的阴影（立体感）*/
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/*设置模态盒的位置*/
margin: auto;
}
.modal-header, .modal-footer {
" data-mce-style="color: #a5c261;">darkcyan;
color: white;
height: 50px;
line-height: 50px;
padding: 0 10px;
}
.modal-header {
display: flex;
justify-content: space-between;
font-size: 26px;
}
.modal-body {
/*height: 100px;*/
line-height: 30px;
" data-mce-style="color: #a5c261;">white;
padding: 0 10px;
}
.close {
cursor: pointer;
transition: 0.5s;
}
color: black;
}
文章标题：html+css+jquery 实现模态盒（模式窗口对话框）
文章链接：http://soscw.com/essay/101435.html