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

Question

我想在 Bootstrap 3 中制作固定页脚，但是单击图标，我想要其他 div 应用程序，并向内容主体添加不透明度。这可以很容易地通过固定类添加，但是如何为内容添加不透明度，以及如何添加向上滑动元素。

问题是我不知道那个元素里面的内容有多大，有时内容很长，有时内容很小，这是小问题..

这是我需要做的截图

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

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

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

http://www.bootply.com/103653

这是我现在拥有的，但我在点击操作时向内容添加不透明度时遇到问题

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>

这里是 fiddle 的完整例子

http://jsfiddle.net/k4xt4g40/ \

我遇到了不透明度问题，如何在折叠可见时添加以及何时不移除？

有这样的东西

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

唯一的问题是当点击另一个 Action 时它必须保持显示 block ？

Answer 1

您可以将 Bootstrap 用于样式化和自定义 jquery 脚本，以实现页面禁用和菜单展开功能。

看看这个 fiddle Navbar

导航栏自动关闭，因为您在底部导航栏中使用的 css 类名有误，

在按钮中重命名如下

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

和

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

希望这能解决你的问题