我需要一些帮助使响应式PopUp具有固定宽度大小。 当用户调整屏幕大小或使用Mobile时,我希望PopUp具有默认宽度大小。
图片:http://i61.tinypic.com/2gtq554.png
我需要弹出尺寸固定,例如:55%宽度。
这是我现在的代码:
.modal-box {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px; }
@media (min-width: 50em) {
.modal-box { width: 10%;} }
.modal-box header,
.modal-box .modal-header {
padding: 1.25em 1.5em;
border-bottom: 1px solid #ddd;
}
.modal-box header h3,
.modal-box header h4,
.modal-box .modal-header h3,
.modal-box .modal-header h4 { margin: 0; }
.modal-box .modal-body { padding: 2em 1.5em; }
.modal-box footer,
.modal-box .modal-footer {
padding: 1em;
border-top: 1px solid #ddd;
background: rgba(0, 0, 0, 0.02);
text-align: right;
}
.modal-overlay {
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3) !important;
}
.modal-box a.close {
line-height: 1;
font-size: 1.5em;
position: absolute;
top: -0%;
right: 2%;
text-decoration: none;
color: #bbb;
}
.modal-box a.close:hover {
color: #222;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
transition: color 1s ease;
}
.buttonFb {
background: none repeat scroll 0 0 rgb(73, 108, 180);
box-sizing: border-box;
border-radius:10px
color: #ffffff !important;
cursor: pointer;
display: block;
font-family: Lucida Grande;
font-size: 16px;
font-weight: 400;
padding: 18px 5px;
width: 100%;
font-size: 22px;
text-decoration:none !important;
text-align:center;
}