Как отображать всплывающие окна в нижней части страницы?

Question

У меня есть popup модальный, который показывает через 10 секунд. Но он показан в верхней части страницы, и я хочу, чтобы он отображался внизу страницы над нижним колонтитулом.

Как это сделать?

Вот мой код:

// Get the modal 
 
    var modal = document.getElementById('myModal'); 
 
    // Get the button that opens the modal 
 
    var btn = document.getElementById("myBtn"); 
 
    // Get the <span> element that closes the modal 
 
    var span = document.getElementsByClassName("close2")[0]; 
 
    // When the user clicks the button, open the modal 
 
    btn.onclick = function() { 
 
     modal.style.display = "block"; 
 
    } 
 
    // When the user clicks on <span> (x), close the modal 
 
    span.onclick = function() { 
 
     modal.style.display = "none"; 
 
    } 
 
    // When the user clicks anywhere outside of the modal, close it 
 
    window.onclick = function(event) { 
 
     if (event.target == modal) { 
 
      modal.style.display = "none"; 
 
     } 
 
    }

.close { 
 
    color: white; 
 
    float: right; 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
} 
 
.close:hover, 
 
.close:focus { 
 
    color: #000; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 
.modal-header { 
 
    padding: 2px 16px; 
 
    background-color: #2098d1; 
 
    color: white; 
 
} 
 
.modal-body { 
 
    padding: 2px 16px; 
 
} 
 
.modal-footer { 
 
    padding: 2px 16px; 
 
    background-color: #5cb85c; 
 
    color: white; 
 
} 
 
.modal { 
 
    position: absolute; 
 
    top: 200px; 
 
    right: 50px; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 1040; 
 
    overflow: auto; 
 
    overflow-y: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 

 
<div class="modal fade" id="popup" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
 
       <h4 class="modal-title" id="myModalLabel">Special Offer</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <h1 style="color:green">10% OFFER </h1> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

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

JavaScript:

$(function() { 
    setTimeout(function() { 
    $("#popup").modal(); 
    }, 2000); 
}); 

CSS:

#popup { 
    top: auto; 
    bottom: 10px; 
    outline: none; 
} 

Просмотр

Bootply: http://www.bootply.com/DmyamsX6qg
* Нажмите на ссылку и используйте полноэкранный режим, чтобы проверить функциональность.