制作 twitter Bootstrap 弹出模式幻灯片并粘贴到页面底部

时间：2023-06-14

本文介绍了制作 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 弹出模式幻灯片并粘贴到页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！



上一篇：Bootstrap 3 - 从另一个模式打开模式 
下一篇：显示引导模式首次页面加载 

 
相关文章

     
    layer.open打开的页面关闭时，父页面刷新的方法layer.open打开的页面关闭时，父页面刷新的方法，在layer.open中添加： end: function(){ window.parent.location.reload();//关闭open打开的页面时，刷新父页面 }

防止引导模式窗口在提交表单时关闭
将参数发送到引导模式窗口?
Twitter Bootstrap modal 将 html 内容推送到左侧
Twitter Bootstrap Modal没有弹出用户登录
谷歌地图模式问题
在模态或对话框内时，IE 中的新 Google reCAPTCHA 出现问题
另一个 div 内的引导模式窗口
固定引导程序 3 模式中的标题位置
使用 jquery 禁用所有具有模式功能的页面元素
使用 bootstrap 3.0 模式在 iframe 中加载动态的远程内容