javascript - 如何在页面底部显示弹出模式？

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;
}

预览

Bootstrap :http://www.bootply.com/DmyamsX6qg
* 点击链接并使用全屏 View 查看功能。