페이지가로드 될 때 라이트 박스에 숨겨진 div의 내용을 표시하려고합니다.라이트 박스 플러그인 colorbox를 사용하는 방법은 무엇입니까?
color box으로 어떻게 할 수 있습니까?
무엇을 알지 못합니다 :
CSS 파일을 사용해야합니까? 어느 것, 그것은 어디에 있습니까?
페이지가로드 될 때 어떻게 라이트 박스를 표시합니까? 당신은 당신이 원하는 어느 테마에서 ColorBox의 CSS 파일을 사용해야합니까
$(document).ready(function(){
$("#div_id_i_want_to_show").colorbox({width:"50%", inline:true});
});
jyoseph의 대답은 올바른 방향이었습니다. 또한 div가 표시되기 전에 div를 표시해야했습니다 (그렇지 않으면 검은 색 화면 만 표시됨). 사용자가 라이트 박스를 닫은 후에 div를 숨겨야했습니다.
참고 : 이미지를 넣을 디렉토리를 가리 키도록 CSS 파일을 편집해야했습니다.
$(document).ready(function(){
$('#div_id_i_want_to_show').show();
$.colorbox({'href':'#div_id_i_want_to_show', 'inline':true, 'width':'600px', 'height':'600px'});
$(document).bind('cbox_closed', function(){
$('#div_id_i_want_to_show').hide();
});
});
:
나는이하지만 행운을 시도했다. 다운로드에는 5 명이 포함되어 있습니다. Example1, Example2, Example3, Example4, Example5 폴더를 참조하십시오. 각 하나는 CSS 파일과 이미지가있는 폴더를 갖습니다. 원하는 경우 사용자 정의 테마를 만들 수도 있습니다. $ .colorbox()근무 예 : 공용 방법을 사용하는 데 필요한 페이지로드 ColorBox을 열기 위해
그 예에서 http://jsbin.com/uficu
을 내가 가진 HTML : <div id="content">Hello from JSBin</div>
그리고 공공 방법 : $ .colorbox ({HREF : '# 콘텐츠'오픈 : 사실, 인라인 : TRUE}) 문서
오픈 옵션 올리을 시도해보십시오
여기 내 마지막 코드입니다.
$(".el").colorbox({open:true})
트릭입니다. 이를 위해 자바 스크립트를 추가하거나 칼라 박스 닫기 이벤트를 후킹 할 필요가 없습니다.
jquery.colorbox는 HTML 내용을 표시하기 전에 body 루트에서 생성 한 구조로 인라인 컨텐츠를 재배치하고 닫을 때 뒤로 이동합니다. 그것은 이상한 행동 인 IMO이지만 이점을 활용하고 이에 따라 '숨김 규칙'을 적용하십시오.
<style>
#div_id_i_want_to_show { display: block; ...your other style rules... }
#divParent #div_id_i_want_to_show { display: none; }
<style>
<div id='parent'><div id='div_id_i_want_to_show'>...
또는 규칙을 반전하고 colorbox 정의 요소에 따라 '공개 규칙'을 배치하십시오.
<style>
#div_id_i_want_to_show { display: none; ...your other style rules... }
.colorbox #div_id_i_want_to_show { display: block; }
<style>
<div id='div_id_i_want_to_show'>...
아, 또, 또 다른 옵션은 .hiddenDiv 래퍼 내부에 #div_id_i_want_to_show을 유지하는 것입니다.emailPopup
<div class="emailUse">
<a class="emailPopup" href="#emailPopup_content">Mail Me</a>
</div>
당신은 id가 일부 팝업을 열려면 몇 가지 버튼을 클릭에
<style>
#div_id_i_want_to_show { ...your style rules... }
.hiddenDiv { display: none; }
<style>
<div class='.hiddenDiv'><div id='div_id_i_want_to_show'>...
는 emailPopup_content은 colorbox
<div style='display: none'>
<div id='emailPopup_content'>
Hi user,
Thank you!
</div>
</div>
당신이 jQuery를로 작성하기 만을 사용하고 있습니다 :
를$(document).ready(function() {
$('.emailPopup').colorbox({inline:true, width:"380px",height:"410px"});
});
설명 :
<head>
<link rel="stylesheet" href="colorbox.css">
<script src="jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
</head>
http://www.jacklmoore.com/colorbox/jquery.colorbox.js http://www.jacklmoore.com/colorbox/example4/colorbox.css
당신은 전시를 포기하고 배치하여 숨어 수 있습니다
HREF잊지 마십시오 포함하는 아래 참조로 jQuery를 숨겨진 사업부의 emailPopup_content가 팝업에 표시됩니다 div 당신이 숨겨진 div 안에 "#div_id_i_want_to_show"를 보여주고 싶습니다. – mcassano