Заблокировать бутстрап, модальный в нижний правый угол?

Question

Я хотел бы, чтобы заблокировать модальное Bootstrap 3 к правому нижнему углу окна, как это:

Я попытался переместить его с помощью top: x%; left: x% CSS, но это полностью разрушает отзывчивость. Как заблокировать его в правом нижнем углу окна, независимо от размера окна?

Заранее спасибо.

JSFiddle: http://jsfiddle.net/eqhdqsyp/6

Answer 1

если вы хотите расположить его по отношению к окну, вы хотите position:fixed;, и если вы хотите, чтобы она осталась на якоре справа и снизу, когда экран изменяет размер слева и сверху не будет работать, как вы уже отметили, используйте вместо этого right и bottom.

Bootstrap уже стили это Див, как это:

@media (min-width: 768px) 
.modal-dialog { 
    width: 600px; 
    margin: 30px auto; 
} 

.modal-dialog { 
    position: relative; 
    width: auto; 
    margin: 10px; 
} 

так что вам нужно переопределить с этим:

.modal.in .modal-dialog { 
    position:fixed; 
    bottom:0px; 
    right:0px; 
    margin:0px; 
} 

http://codepen.io/ryantdecker/pen/ZOpQOX

Answer 2

.modal-class { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
} 

Это должно работать.

Answer 3

Базовая концепция из ссылки действительно работает. Вот скрипку: https://jsfiddle.net/d0nfh6kz/

#myModal1 { 
    top:70%; 
    left:27%; 
    outline: none; 
} 

<!-- Button trigger modal --> 
<a data-toggle="modal" href="#myModal1" class="btn btn-primary btn-lg">Launch demo modal</a> 

<!-- Modal --> 
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       <h4 class="modal-title">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
       ... 
      </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 -->