Menu
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>
658
The problem is in your CSS. You need to set the bottom property not the top property in order to get your desired result, but you can't do this on the .modal class, you need to do it on the .modal-body class.
CSS:
.modal.fade.in .modal-body {
bottom: 0;
}
.modal-body {
position: absolute;
bottom: -250px;
right: 5%;
padding: 15px;
width: 275px;
height: 250px;
background-color: #e5e5e5;
border-radius: 6px 6px 0 0;
-webkit-transition: bottom 0.3s ease-out;
-moz-transition: bottom 0.3s ease-out;
-o-transition: bottom 0.3s ease-out;
transition: bottom 0.3s ease-out;
}
.close {
margin-top: -20px;
text-shadow: 0 1px 0 #ffffff;
}
.popup-button {
margin-left: 140px;
margin-top: 77px;
font-weight: bold;
}
HTML:
<div class="modal fade" id="slide-bottom-popup" data-keyboard="false" data-backdrop="false">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<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><!-- /.modal-body -->
</div><!-- /.modal -->
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
