使用向上滑动内容制作bootstrap 3固定页脚？

Question

我想在Bootstrap 3中制作固定页脚，但是点击图标，我想要另外一个div来apper，并为内容正文添加不透明度。这可以通过类固定添加，但如何向内容添加不透明度，以及添加该向上滑动元素。

问题在于我不知道该元素内部的内容有多大，有时它会是长内容，有时很小，这是一个小问题。

这是我需要制作的剧本

现在有人点击ACTION我需要这个

这可以通过boostrap JS完成，还是需要一些自定义JS和css

这里是类似的解决方案，但只是在较小的屏幕上

http://www.bootply.com/103653

这是我现在所拥有的，但是我有问题在clik on action上添加不透明度

CSS

#accordion {
    position: fixed;
    bottom: 30px;
    border-radius:none !important;
    padding-left:0px;
    padding-right:0px;
    z-index:1030;
}
.opacity{
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    height: 100%;
    left: 0;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 999;
}

HTML

<div class="opacity"></div>
<div class="panel-group col-md-12 col-sm-12 col-xs-12" id="accordion">
<div class="panel panel-default">
<div class="panel-heading clearfix">
  <h4 class="panel-title text-center"><a class="pull-right" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> ACTION </a> <br>
<a class="pull-right" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> ACTION2 </a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">


HERE GOES THE CONTENT

</div>
<div id="collapseTwo" class="panel-collapse collapse">
Lorem Ipsum је једноставно модел текста који се користи у штампарској и словослагачкој индустрији. Lorem ipsum је био стандард за модел текста још од 1500. године, када је непознати штампар узео кутију са словима и сложио их како би направио узорак књиге. Не само што је овај модел опстао пет векова, него је чак почео да се користи и у електронским медијима, непроменивши се. Популаризован је шездесетих година двадесетог века заједно са листовима летерсета који су садржали Lorem Ipsum пасусе, а данас са софтверским пакетом за прелом као што је Aldus PageMaker који је садржао Lorem Ipsum верзије.

</div>
</div>
</div>

<footer class="container-fluid" role="contentinfo">
  <nav class="navbar navbar-default navbar-fixed-bottom">
    <div class="navbar-inner navbar-content-center"> Copyright </div>
  </nav>
</footer>

以下是小提琴的完整示例

http://jsfiddle.net/k4xt4g40/ \

我遇到了不透明度的问题，如果崩溃是不可见的，如何在不删除时添加？

有类似的东西

http://jsfiddle.net/k4xt4g40/2/

唯一的问题是，当点击另一个动作时它必须保持显示块？

Answer 1

您可以使用bootstrap来设置样式化和自定义jquery脚本，以实现页面禁用和菜单扩展功能。

看看这个小提琴Navbar

由于您在底部导航栏中使用的css类名称出错，导航栏会自动关闭，

在按钮

中重命名如下

data-target=".navbar-collapse" to data-target=".navbar-collapse-bottom"

和

<div class="navbar-collapse-bottom collapse">

希望这能解决您的问题