響應引導模式

我有這樣的jsfiddle：http://jsfiddle.net/jsFiddlePlayer/8XdVt/338/響應引導模式

的引導模式需要填寫頁面的大部分，被放置100像素從頁面的頂部，並不會導致頁面滾動。換句話說，整個模態需要在顯示區域顯示。它還有一個背景圖片，需要以響應式的方式適合模式。

我已使用此SO post以及this article。但是，如何將模式限制在沒有滾動條的顯示區域並保持背景圖像的響應？正如你注意到的，在某些屏幕尺寸下，模態在膝蓋處切斷圖片中的人物。

該解決方案可以包含jQuery，因此它不一定是純CSS。謝謝。

這裏的HTML：

<!-- Button trigger modal --> 
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#onload-popup"> 
    Launch modal 
</button> 

<div class="modal fade" role="dialog" aria-hidden="true" id="onload-popup"> 
    <div class="modal-dialog center-block"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
      <div class="container-fluid"> 
      <div class="row"> 
       Content goes here. 
      </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal -->

這裏的CSS：

.modal { 
    top:100px; 
} 
.modal-backdrop { 
    top:100px; 
} 
.modal-dialog { 
    width: 95%; 
    height: 100%; 
    padding: 0; 
} 
.modal-content { 
    min-height: 100%; 
    height: auto; 
    border-radius: 0; 
    overflow:auto; 
    background-size: cover; 
    background-image: url('data:image/jpg;base64, /* ... image code ... */'); 
    background-repeat: no-repeat; 
    background-attachment: local; 
    background-position: center center; 
}

更新：這是接近的解決方案：http://jsfiddle.net/jsFiddlePlayer/8XdVt/341/它仍然沒有發揮好與的背景圖像莫塔爾，因爲它被剪斷，但我不認爲有任何解決方法。

來源

2015-06-15 Alex

那麼，你需要一些視窗空間來正確顯示圖像，不知道這是否可以幫助，但這裏是我作出的刪除滾動條和頂部圖像中心（所以它不能有頭切割 - off）

.modal { 
    top:100px; 
    overflow: hidden; 
    overflow-y: hidden; 
} 
.modal-content { 
    background-position: top center; 
}

來源

2015-06-15 13:51:46

謝謝，@Michelem。但是模態的內容不應該被裁剪（溢出隱藏）。 – Alex

嘗試改變這個CSS的一些。底部還是有一些背景圖片。

 .modal { 
      top:7%; 

     } 
     .modal-backdrop { 
      top:10%; 
     }   
     .modal-dialog { 

      width: 100%; 
      height: 100%; 
      padding: 0; 
     }

來源

2016-10-12 10:17:49

如果你想這樣做WebKit的，你可以使用

.modal.fade.in::-webkit-scrollbar{ 
    display:none 
}

但我不知道是否有可能使用differeng辦法做到這一點的IE瀏覽器，並有另一種解決方案;

.modal.fade.in{ 
    overflow-y:hidden; 
}

如果你使用第二個選項，你應該玩一些模態的位置，使其完全可見。

來源

2016-10-12 10:40:49

響應引導模式

回答

相關問題