I am using bootstrap 2.3 and I have a modal that slides from the bottom of the page after a few seconds and I want it to stick to the bottom of the screen.
Everything is working except when you resize the browser height the modal doesn't stick to the bottom. Please help!
This is what the pop-up looks like: https://www.dropbox.com/s/kn257b07hdle52i/Screenshot%202014-10-27%2016.09.12.png?dl=0
It sticks until you resize the window, then this: 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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
