html在线弹窗预览,弹窗.html · Pota/BackendHtml - Gitee.com

弹窗

*{

margin: 0;

padding: 0;

}

/*占行*/

.shadow{

position: fixed;

top: 0;

width: 100%;

height: 100%;

z-index: 100;

background-color: #000;

font-size: 12px;

background: rgba(0,0,0,0.5);

-webkit-background: rgba(0,0,0,0.5);

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr='#880000',endcolorstr='#880000');

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

}

/*让弹窗位以左侧栏以外的主体内容居中显示*/

@media (min-width: 768px){

.limit{

margin-left: 220px;

height:900px;

}

}

@media(max-width: 320px){

.limit{

margin-left: 0px;

}

}

/*可输入的弹窗*/

.alert-box{

margin:240px auto;

background: #fff;

width: 400px;

border-radius: 10px;

}

.name-text{

width: 20%;

line-height: 34px;

margin-bottom: 0px;

float: left;

}

.name-input{

width: 80%;

line-height: 34px;

float: left;

}

.input-form{

width: 100%;

margin-bottom: 15px;

}

.top-alert{

height: 40px;

line-height: 40px;

background: rgba(139, 195, 73, 0.38);

border-top-left-radius: 10px;

border-top-right-radius: 10px;

}

.form,.button-group{

padding: 15px;

}

.close{

display: inline-block;

width: 40px;

height: 40px;

line-height: 40px;

text-align: center;

}

.long{

padding: 5px 25px;

}

/*可输入的弹窗end*/

.input-alert{

/*display: none;*/

}

✖

登录名:

密码:

确认

取消

✖

账号:

17775262356

账号:

17775262356

账号:

17775262356

确认

取消

一键复制

编辑

Web IDE

原始数据

按行查看

历史