2016年7月12日 星期二

讓 bootstrap 的 modal 可以在視窗高度內

bootstrap 是很方便的 UI framework,但有些地方還是會需要做些調整比較適合使用,比如最近遇到的這個問題,如果我要把表單放在 modal 裡面,選項一多小視窗就會超過瀏覽器的高度,而且 bootstrap 預設的樣式 modal 是不會隨視窗調整大小的,這樣 modal 下半部就會沒辦法按到,要能夠在內容太長的情況下還可以使用,就需要做以下的調整。

  1. .modal-dialog,   
  2. .modal-content {   
  3.     /* 90% of window height */  
  4.     height: 90%;   
  5. }   
  6. .modal-body {   
  7.     /* 100% = dialog height, 120px = header + footer */  
  8.     max-height: calc(100% - 120px);   
  9.     overflow-y: scroll;   
  10. }  

簡單調整一下 modal 裡面的高度就好,.modal-body 的 max-height 用了 CSS3 的 calc() ,是 CSS 新增可以計算的語法,而且大多瀏覽器都有支援了,可以放心使用。
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...