Faire twitter Bootstrap popup modale de la diapositive et le bâton vers le bas de la page

Je suis en utilisant bootstrap 2.3 et j'ai un modal qui se glisse à partir du bas de la page après quelques secondes, et je veux qu'il à coller au fond de l'écran.
Tout fonctionne sauf lorsque vous redimensionnez le navigateur de la hauteur de l'modal ne colle pas au fond. S'il vous plaît aider!

C'est ce que la pop-up ressemble: https://www.dropbox.com/s/kn257b07hdle52i/Screenshot%202014-10-27%2016.09.12.png?dl=0

Il bâtons jusqu'à ce que vous redimensionnez la fenêtre, puis ceci: https://www.dropbox.com/s/r0x4mkpj9xvsu61/Screenshot%202014-10-27%2016.10.00.png?dl=0

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>pop-up</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<!-- Duplicated campaign styles -->
<link href="duplicate.css" rel="stylesheet" media="screen">
</head>
<body>
<!----------------- Pop-up timeout function-------------------> 
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$('#slide-bottom-popup').modal('show');
}, 1000); //milliseconds
});
</script>
<style>
/*------------------------------------Pop-up styles-------------------------------------*/
.modal.fade {
top: 100%;
-webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-o-transition: opacity 0.3s linear, top 0.3s ease-out;
transition: opacity 0.3s linear, top 0.3s ease-out;
}
.modal.fade.in {
top: 74.6%; 
}
.modal {
background-color: #e5e5e5;
position: fixed;
left: 95%;
z-index: 1000;
width: 275px;
height: 250px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-bottom-right-radius: 0px;
border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.modal-body {
background-size: 240px;
position: relative;
height: 205px;
padding: 15px;
}
.close {
margin-top: -10px;
z-index: 1050;
margin-left: 210px;
font-size: 20px;
font-weight: bold;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.2;
filter: alpha(opacity=20);
}
.popup-button {
margin-left: 140px;
margin-top: 77px;
font-weight: bold;
}
</style>
<div class="navbar-inner">
</div>
<div class="scrollable" id="super-container">
<div style="min-height: 350px;" class="container">
<!--------------------------------------------- Start Pop-up -------------------> 
<div id='slide-bottom-popup' class="modal hide fade visible-desktop" data-keyboard="false" data-backdrop="false">
<div class="modal-body">
<a class="close" data-dismiss="modal">x</a><br>
<p>I'm a pop sliding from the bottom that's suppose to stick</p>
<a href="" class="btn-primary btn-plain btn popup-button">CTA</a>
</div>
</div>
</div>
</div>
</body>
</html> 

OriginalL'auteur user3421408 | 2014-10-27