响应弹出固定宽度大小

时间:2014-12-29 18:11:07

标签: css popupwindow

我需要一些帮助使响应式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;

 }

0 个答案:

没有答案