Как сохранить модальность начальной загрузки в нижней части области просмотра для мобильных устройств - модальная область справа внизу для рабочего стола, но остается главной в мобильных областях просмотра

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

Решено чтением по медиа-запросам.