2

我正在尝试在桌面视口的右下角和移动设备的居中底部显示引导模式。

我正在使用位置：固定和底部：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>

到目前为止，我无法有效地将模态锁定在移动视口中的底部。

4

0 回答 0