twitter-bootstrap – 如何在弹出窗口中添加页脚并使内容可滚动

发布时间：2020-12-18 00:27:54 所属栏目：安全来源：网络整理

导读：这是图像(我要做的) 如何添加页脚到弹出窗口并使内容可滚动？使用Twitter bootstrap 3 解决方法要使用页脚创建弹出窗口,您必须更改弹出窗口模板并添加一些CSS来设置该页脚的样式.在这里,我还在页脚中放置了一个按钮,如图所示,但您必须弄清楚自己想要用它做

这是图像(我要做的)

如何添加页脚到弹出窗口并使内容可滚动？使用Twitter bootstrap 3

解决方法

要使用页脚创建弹出窗口,您必须更改弹出窗口模板并添加一些CSS来设置该页脚的样式.在这里,我还在页脚中放置了一个按钮,如图所示,但您必须弄清楚自己想要用它做什么.

<div class="popover">
   <div class="arrow"></div>
   <h3 class="popover-title"></h3>
   <div class="popover-content"></div>
   <div class="popover-footer">
       <button type="button" class="btn btn-default">Button</button>
   </div>
</div>

$("[rel=details]").popover({
   trigger : 'click',placement : 'bottom',content : 'Lorem ipsum dolor ...',template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div><div class="popover-footer"><button type="button" class="btn btn-default">Button</button></div></div>' 
});

样式的页脚：

.popover-footer {
  margin: 0;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  background-color: #F7F7F7;
  border-bottom: 1px solid #EBEBEB;
  border-radius: 5px 5px 0 0;
}

使popover-content可滚动：

.popover-content {
  overflow-y : scroll;
  height: 200px;  
}

看演示 – > http://jsfiddle.net/3x4yD/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!