Css 响应弹出窗口固定宽度大小

我需要一些帮助，使一个响应弹出有一个固定的宽度大小。 当用户调整屏幕大小或使用Mobile时，我希望弹出窗口具有默认的宽度大小

图片：

我需要固定的弹出窗口大小，例如：55%的宽度

这是我现在掌握的代码：

---

添加一些html使其成为一个完整的代码示例将非常有用Hello Chuijjer，您知道如何解决此问题吗？您好，您可以共享其链接或在Fiddle上显示。

.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;

 }