如何保持自举模式的视口的底部移动 - 模式是右下角的桌面，但在移动视口顶部停留

Question

我想显示在桌面视窗右下角的引导模式，并为本底的移动。

我使用位置是：固定和底部：0;这在移动，而不是底部，桌面视窗，但我的语气显示工作顶部中心。

使用媒体查询或以其他方式让我的模式在底部移动视窗任何提示？

感谢您的时间。

我相信我需要换行模式在一个div或使用媒体查询定位在移动视窗模态，但一直没能得到任何正常工作超出了我当前的代码满足我的所有要求，除了在底部显示的引导模式移动视口。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<style>@media only screen and (min-width: 768px) {
 .modal .modal-dialog {
 position:fixed;
 bottom: 0;
 right:0;
 width:auto;
 margin: 10px;
 }
 @media only screen and (max-width: 768px) {
 .modal .modal-dialog {
 position:fixed;
 bottom: 0;
 right:0;
 width:auto;
 margin: 10px;
 }
}</style>


<div id="myModal" class="modal fade" role="dialog">
 <div class="modal-dialog">

 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal">&times;</button>
 <h4 class="modal-title">Modal Header</h4>
 </div>
 <div class="modal-body">
 <p>Some text in the modal.</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 </div>
 </div>

 </div>
</div>


<script> $(window).load(function(){
 $('#myModal').modal('show');
 });
$(function(){
 $('#myModal').on('show.bs.modal', function(){
 var myModal = $(this);
 clearTimeout(myModal.data('hideInterval'));
 myModal.data('hideInterval', setTimeout(function(){
 myModal.modal('hide');
 }, 3000));
 });
});
</script>

到目前为止，我无法有效地锁定在移动视口模态上下。

Answer 1

通过媒体查询阅读了解决。