CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
uiit
uiit

Reputation: 83

How to display popup model at the bottom of page?

I have a popup modal which shows after 10 seconds. But it is shown at the top of page and I want that it should be shown at the bottom of page above footer.

How can I do this?

Here is my code :

 // 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>

Upvotes: 2

Views: 11052

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Not sure if you need so much code. But this can be made this way:

JavaScript:

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

CSS:

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

Preview

preview

Bootply: http://www.bootply.com/DmyamsX6qg
* Click on the link and use the full screen view to check out the functionality.

Upvotes: 6

Related Questions