색상 상자를 사용하여 div를 표시 할 때 문제가 발생했습니다.

Question

좋은 하루 전문가,

특정 div를 표시하기 위해 Colorbox 플러그인을 사용하고 있지만이 문제가 발생합니다.

구조는 다음과 같다 :

1 숨겨진 사업부는 내가 사업부가 표시 될 때 처음으로 BTN을 클릭하면 사업부

을 표시

2 표시 BTN를 표시 할

어떤 문제도없이 ESC btn을 눌러 닫고 이전 단계를 다시 되돌리고 btn을 클릭하면 div가 표시되지 않고 div가 열립니다.

이것은 HTML 코드

입니다.3210

<div class="to_be_show"> 
    <!-- html structure is here --> 
</div> 
<p class="display">display</p> 

이이이 JS 코드

$('.display').click(function(){ $('.to_be_show').css('display','block'); }); 
$('.display').colorbox({opacity: 0.98,inline:true}); 
$(document).bind('cbox_closed', function() {$('.to_be_show').css('display','none'); }); 

그래서, 내 코드와 함께 문제가 무엇인가하는 CSS 스타일

.to_be_show{ width: 500px; height: 200px; background: red; display: none; } 

에게있다?!

-------- 업데이트

----------

내가 문제를 알고 있지만 나는 그것을 해결하는 방법을 모른다! 내용이 동적으로

로드로

나는 jQuery로 디스플레이의 HREF ATTR을 설정할 그리고 난이 사용하고 작동하지 않았다!

$('.show_album').colorbox({href:$(this).prev()}); 

왜 ??

Answer 1

당신은 인라인 색상 상자를

HTML 마크 업

<div style="display:none"> 
    <div class="to_be_show" id="to_be_show"> 
     Element to be show 
    </div> 
</div> 
<a href="#to_be_show" class="inline cboxElement">Display</a> 

CSS

.to_be_show { 
    width: 500px; 
    height: 200px; 
    background: red; 
} 

JS

를 작성하여이를 달성 할 수

$(document).ready(function() { 
    $(".inline").colorbox({ 
     inline: true, 
     opacity: 0.98, 
    }); 
}); 

여기는 fiddle입니다.

포함 할 것을 잊지 마세요. colorbox css & js 환호성 !!!