Twitter Bootstrap popup modal schieben und halten Sie unten auf der Seite

Ich bin mit bootstrap 2.3 und ich habe einen modalen, dass die Folien von der Unterseite der Seite nach ein paar Sekunden, und ich möchte es zu bleiben, um den unteren Rand des Bildschirms.
Alles funktioniert außer, wenn Sie die Größe des Browsers Höhe der modal-nicht auf den Boden kleben. Bitte um Hilfe!!

Dies ist, was die pop-up sieht wie folgt aus: https://www.dropbox.com/s/kn257b07hdle52i/Screenshot%202014-10-27%2016.09.12.png?dl=0

Klebt, bis Sie die Größe des Fensters ändern, dann dieses: 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>

InformationsquelleAutor user3421408 | 2014-10-27

  1. 5

    Das problem ist in deinem CSS. Sie müssen die Eigenschaft bottom nicht die top-Eigenschaft, um zu bekommen Ihren gewünschten Ergebnis, aber Sie können nicht dies tun, auf die .modale Klasse, Sie müssen es tun, auf die .modal-body-Klasse.

    Demo

    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">&times;</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 -->
    Das funktioniert, danke!
    Das ist perfekt, aber was ist, wenn ich einstellen will localStorage-für 24 Stunden?

    InformationsquelleAutor jme11

Schreibe einen Kommentar