Перемещение элемента при изменении размера окна

Question

У меня есть всплывающее окно модели, которое накладывает окно. Когда этот div активен, элементы содержимого этого div перемещаются, когда я изменяю размер окна.

код CSS:

 .modalBackground { 

       background-color: #808080; 
       filter: alpha(opacity=40); 
       /*opacity:0.5; */ 
       position: fixed; 
       left: 0; 
       top: 0; 
       z-index: 10; 
       width: 100%; 
       height: 100%; 
       background-color: rgba(0,0,0,0.4); 
      } 
.progress 
     { 
      position:relative; 
      width:445px; 
      border: 1px solid #ddd; 
      padding: 1px; 
      border-radius: 3px; 
      margin-left:35%; 
      background-color:transparent !important; 
      margin-top:4%; 
      text-align:center !important; 
     } 

     .bar 
     { 
      background-color: #B4F5B4 !important; 
      width:50%; 
      height:20px; 
      border-radius: 3px; 
      background-image: linear-gradient(to bottom,#EA7350,#FF662F) !important; 
     } 

     .percent 
     { 
      position:absolute; 
      display:inline-block; 
      top:3px; 
      left:48%; 
      color:black; 

     } 

Html код для этого CSS

<div id="popupdiv" class="modalBackground"> @* style="display:none;" *@ 
          <div style="text-align: center; padding-top: 20%;"> 

            <div class="progress" > 
             <div class="bar"></div > 
             <div class="percent">0%</div > 
            </div> 

           <input type="button" id="cancel" class="gray-btn" name="Cancel" value="Cancel Upload.." onclick="textHiddenCancel.value = 'cancel';" style="width:8%; margin-left:55%; background-color:#E2611E!important;"/> 

          </div> 

         </div> 

провели исследование, но не нашли никакого решения пока нет. Пожалуйста, помогите мне в этом. ширина link

Answer 1

.modalBackground { 
 

 
       background-color: #808080; 
 
       filter: alpha(opacity=40); 
 
       /*opacity:0.5; */ 
 
       position: fixed; 
 
       left: 0; 
 
       top: 0; 
 
       z-index: 10; 
 
       width: 100%; 
 
       height: 100%; 
 
       background-color: rgba(0,0,0,0.4); 
 
      } 
 
.progress 
 
     { 
 
      position:relative; 
 
      width:30%; 
 
      border: 1px solid #ddd; 
 
      padding: 1px; 
 
      border-radius: 3px; 
 
      margin-left:35%; 
 
      background-color:transparent !important; 
 
      margin-top:4%; 
 
      text-align:center !important; 
 
     } 
 

 
     .bar 
 
     { 
 
      background-color: #B4F5B4 !important; 
 
      width:50%; 
 
      height:20px; 
 
      border-radius: 3px; 
 
      background-image: linear-gradient(to bottom,#EA7350,#FF662F) !important; 
 
     } 
 

 
     .percent 
 
     { 
 
      position:absolute; 
 
      display:inline-block; 
 
      top:3px; 
 
      left:48%; 
 
      color:black; 
 

 
     }

<div id="popupdiv" class="modalBackground"> @* style="display:none;" *@ 
 
          <div style="text-align: center; padding-top: 20%;"> 
 

 
            <div class="progress" > 
 
             <div class="bar"></div > 
 
             <div class="percent">0%</div > 
 
            </div> 
 

 
           <input type="button" id="cancel" class="gray-btn" name="Cancel" value="Cancel Upload.." onclick="textHiddenCancel.value = 'cancel';" style="width:8%; margin-left:55%; background-color:#E2611E!important;"/> 
 

 
          </div> 
 

 
         </div>

Try в процентах