2013-01-23 4 views
2

그래서 나는 궁금해서 ... 나는 내 프로젝트에 트위터의 부트 스트랩을 사용하고 있으며 Popover/Clickover (http://www.leecarmichael.com/bootstrapx-clickover/examples.html) 기능에 대한 작은 알림을 남겼다. 그리고 난부트 스트랩 Popover/Clickover

이 팝 오버/clickover를 만드는 내 기본 개념은 ... 내가 그것을에서 사용자 지정 스크롤 막대와 고정 높이에 그것을 만들기 위해 관리 할 수있는 방법 궁금 해서요 : HTML

$(function() { 
    $("[rel='tooltip']").tooltip({container: 'body'}); 
}); 
$("#notices").clickover({ 
    content:data, 
    html:true, 
    container:'body' 
    ,onShown: function() {$("#notices").tooltip("destroy");}, 
    onHidden: function() {$("#notices").tooltip({container:'.navbar'});}, 
    template: '\ 
     <div class="popover notices">\ 
      <div class="arrow"></div>\ 
      <div class="popover-inner">\ 
       <div class="popover-header">\ 
        <h3 class="popover-title"></h3>\ 
        <h3 class="popover-settings"><a href="/notifications.php?act=settings">Settings</a></h3>\ 
       </div>\ 
       <div class="popover-content">\ 
        <p></p>\ 
       </div>\ 
       <h3 class="popover-footer"><center><a href="/notifications.php">See All</a></center></h3>\ 
      </div>\ 
     </div>' 

}); 

<div id='userbar' class='btn-group input-prepend input-append'> 
    <button class='btn'></button> 
    <button class='btn'></button> 
    <button class='btn'></button> 
    <button class='btn'></button> 
    <button class='btn'></button> 
    <button class='btn'></button> 
    <button class='btn'></button> 
    <button id='notices' class='btn' rel='tooltip' data-placement='bottom' data-original-title='Notifications'> <i class='icon-exclamation-sign icon-large'> <span class='badge badge-important'>102</span></i></button> 
</div> 

그래서 JSFiddle에 대한 게시물을 작성했습니다. 부트 스트랩 사이트의 부트 스트랩 지시문을 포함하지 않았지만 툴팁이 약간 수정 되었기 때문에 Javascript 섹션에 코드를 게시했습니다. http://jsfiddle.net/6GRHa/3/

팝 오버와 버튼 인 "느낌표"

과 같은 : 내 주요 코드는 마지막에 비록 그래서

링크는 ..., 코드 라인의 많은 수 있습니다 나는 그것에 더 많은 내용을 위해 사용자 정의 높이와 스크롤 바를 적용하고 싶다고 말했습니다 ... 미리 감사드립니다 ...

답변

7
.popover-content { 
    max-height: 300px; 
    overflow-y: auto; 
} 
+0

근무 주셔서 감사합니다 :) 아주 많은 일했다 – Devian

2

그냥 popover에 고정 높이와 스크롤바를주기 위해 몇 가지 CSS를 추가하십시오 :

,210

바이올린은 여기에 있습니다 : http://jsfiddle.net/6GRHa/4/

+0

감사합니다 :) 아주 많은 – Devian

관련 문제