制作 twitter Bootstrap 弹出模式幻灯片并粘贴到页面底部-前端问题

Make twitter Bootstrap popup modal slide and stick to bottom of page(制作 twitter Bootstrap 弹出模式幻灯片并粘贴到页面底部)

本文介绍了制作 twitter Bootstrap 弹出模式幻灯片并粘贴到页面底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 bootstrap 2.3，我有一个模态框，它会在几秒钟后从页面底部滑动，我希望它贴在屏幕底部.一切正常，除了当您调整浏览器高度时，模式不会粘在底部.请帮忙！

这是弹出窗口的样子:https://www.dropbox.com/s/kn257b07hdle52i/Screenshot%202014-10-27%2016.09.12.png?dl=0

它会一直持续到您调整窗口大小，然后是:https://www.dropbox.com/s/r0x4mkpj9xvsu61/Screenshot%202014-10-27%2016.10.00.png?dl=0

<html><头><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>弹出窗口</title><!-- 引导程序--><link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen"><!-- jQuery(Bootstrap 的 JavaScript 插件所必需的)--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="bootstrap/js/bootstrap.js"></script><!-- 重复的广告系列样式--><link href="duplicate.css" rel="stylesheet" media="screen"></头><身体><!----------------- 弹出超时功能-------------------><脚本类型="文本/javascript">$(文档).ready(函数() {设置超时(函数(){$('#slide-bottom-popup').modal('show');}, 1000);//毫秒});</脚本><风格>/*------------------------------------弹出样式-------------------------------------------------*/.modal.fade {最高:100%；-webkit-transition:不透明度 0.3s 线性，顶部 0.3s 缓出；-moz-transition:不透明度 0.3s 线性，顶部 0.3s 缓出；-o-transition:不透明度 0.3s 线性，顶部 0.3s 缓出；过渡:不透明度 0.3s 线性，顶部 0.3s 缓出；}.modal.fade.in {最高:74.6%；}.modal {背景颜色:#e5e5e5；位置:固定；左:95%；z 指数:1000；宽度:275px；高度:250px；-webkit-border-bottom-right-radius: 0px;-moz-border-bottom-right-radius: 0px;边框右下角半径:0px；-webkit-border-bottom-left-radius: 0px;-moz-border-bottom-left-radius: 0px;边框左下角半径:0px；}.modal-body {背景尺寸:240px；位置:相对；高度:205px；填充:15px；}.关闭 {边距顶部:-10px；z 指数:1050；左边距:210px；字体大小:20px；字体粗细:粗体；文字阴影:0 1px 0 #ffffff;不透明度:0.2；过滤器:阿尔法(不透明度= 20)；}.弹出按钮{左边距:140px；边距顶部:77px；字体粗细:粗体；}</风格><div class="navbar-inner"></div><div class="scrollable" id="super-container"><div style="最小高度: 350px;"类="容器"><!--------------------------------------------- 开始弹出-向上-------------------><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>我是一个从底部滑下来的流行音乐，应该会粘住</p><a href="" class="btn-primary btn-plain btn 弹出按钮">CTA</a></div></div></div></div></身体></html>

解决方案

问题出在你的 CSS 中.您需要设置底部属性而不是顶部属性才能获得所需的结果，但是您不能在 .modal 类上执行此操作，您需要在 .modal-body 类上执行此操作.

演示

CSS:

.modal.fade.in .modal-body {底部:0；}.modal-body {位置:绝对；底部:-250px；对:5%；填充:15px；宽度:275px；高度:250px；背景颜色:#e5e5e5；边框半径:6px 6px 0 0；-webkit-transition:底部 0.3s 缓出；-moz-transition:底部 0.3s 缓出；-o-transition:底部 0.3s 缓出；过渡:底部 0.3s 缓出；}.关闭 {边距顶部:-20px；文字阴影:0 1px 0 #ffffff;}.弹出按钮{左边距:140px；边距顶部:77px；字体粗细:粗体；}

HTML:

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> 

 解决方案 
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.
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 -->


                        
这篇关于制作 twitter Bootstrap 弹出模式幻灯片并粘贴到页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

问题描述

演示

Demo

基础教程推荐