如何做Modal Bootstrap出現在底部

如何設置模態的Bootstrap出現在瀏覽器的底部？如何做Modal Bootstrap出現在底部

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Modal test</button> 

    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
     <div class="modal-dialog modal-lg"> 
     <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="myModalLabel">Modal title</h4> 
      </div> 
      <p>content</p> 
     </div> 
     </div> 
    </div>

我希望能有這樣的結果：

感謝所有幫助

來源

2016-01-24 Gislef

更好地問自己怎樣才能做到這一點，而無需使用模式。 Modal應該是獨立的，就像新窗口一樣。正確的div +造型應該足夠了。或者只是使用工具提示？ – alkuzad

類似的東西會做的工作。現在你需要玩填充，邊距和寬度來調整你的模態;

.modal { 
    position:fixed; 
    top:auto; 
    right:auto; 
    left:auto; 
    bottom:0; 
}

https://jsfiddle.net/9fg7jsu3/1/

編輯：正確類：

.modal-dialog { 
    position:fixed; 
    top:auto; 
    right:auto; 
    left:auto; 
    bottom:0; 
}

否則模式不會消失，如果你點擊它上面。

https://jsfiddle.net/9fg7jsu3/2/

來源

2016-01-24 16:19:07

謝謝@Mateusz安東尼Świątkowski。但是當我點擊上面的模式時，它不會消失，只有當我點擊側面 – Gislef

不客氣:) 我編輯了正確的解決方案，我猜：P 你是好測試者：D 歡呼聲 –

：D謝謝。這工作完美 – Gislef

這一個爲我工作

.modal-dialog { 
    top: calc(100% - 300px); 
}

來源

2017-05-17 13:54:55

如何做Modal Bootstrap出現在底部

回答

相關問題