Işık kutusu eklentisi renk kutusu nasıl kullanılır?

Sayfa yüklendiğinde, ışık kutusundaki gizli bir div içeriğini göstermek istiyorum.Işık kutusu eklentisi renk kutusu nasıl kullanılır?

Bunu color box ile nasıl yapabilirim?

Anlamıyorum Ne:

Onların CSS dosyaları kullanmak gerekir mi? Hangileri, nerede?

Sayfa yüklenirken ışık kutusunu nasıl açarım? İstediğin hangisi tema arasından ColorBox css dosyasını kullanmak gerekiyor

$(document).ready(function(){ 
    $("#div_id_i_want_to_show").colorbox({width:"50%", inline:true}); 
});

kaynak

2009-08-07 Greg

jyoseph'in cevabı doğru yoldaydı. Ayrıca görünmeden önce görünür hale getirmek zorunda kaldım (aksi halde sadece siyah bir ekran gösterir). ve sonra kullanıcı ışık kutusunu kapattıktan sonra div'u gizlemek zorunda kaldım.

Not: Ayrıca, görüntüleri koyduğum dizini işaret etmek için css dosyasını düzenlemeniz gerekiyordu.

$(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(); 
    }); 
});

kaynak

2009-08-08 16:05:48 Greg

Sen gösteren bırakmak ve koyarak saklanmak:

href

unutmak YAPMAYIN dahil etmek altında başvurulan olarak jQuery gizli div emailPopup_content açılır pencerede gösterilir Gizli bir div içinde "#div_id_i_want_to_show" u göstermek istediğiniz şeyi. – mcassano

bu ama hiçbir şans çalıştı. İndirmede 5 tane yer var. Örnekler1, Örnek2, Örnek3, Örnek4, Örnek5 klasörlerine bakın. Her birinde bir css dosyası ve resimler içeren bir klasör bulunacaktır. İsterseniz kendi özel temanızı da oluşturabilirsiniz. $ .colorbox()

Çalışma örneği:: Ortak yöntemi kullanmak gerekir sayfa yüklemesinde Colorbox açmak için

o örnekte http://jsbin.com/uficu

Ben html: <div id="content">Hello from JSBin</div>

ve kamu yöntemi: $ .colorbox ({href: '# content' açık: true, inline: true}) belgelerine

atın: http://colorpowered.com/colorbox/

kaynak

2009-08-08 02:52:45 jyoseph

açık seçeneği Olli deneyin:

İşte benim son kod.

$(".el").colorbox({open:true})

kaynak

2009-11-28 18:30:04 johnnymire

İşte bir numara. Bunun için javascript eklemek (veya colorbox kapatma etkinliğini kancalamak) gerekli değildir.

jquery.colorbox, satır içi içeriğinizi, gösterilmeden önce html> gövde kökü dışında oluşturduğu bir yapıya taşır ve kapatıldığında geri taşır. Bu garip bir davranış IMO'dur, ancak avantajdan faydalanın ve 'gizlilik kuralınızı' uygun şekilde uygulayın.

<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'>...

Alternatif olarak, kuralları ters ve koyun bir bir ColorBox tanımlı eleman bağlıdır 'kuralını ortaya'.

<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'>...

Ah, ayrıca, henüz başka seçenek .hiddenDiv mahfaza içine senin #div_id_i_want_to_show tutmaktır.emailPopup

<div class="emailUse"> 
    <a class="emailPopup" href="#emailPopup_content">Mail Me</a> 
</div>

Kimin kimliği bazı açılır pencere açmak isteyen bazı butonuna tıklayarak

<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'>...

kaynak

2010-11-22 19:02:34 Shannon

emailPopup_content Colorbox

<div style='display: none'> 
    <div id='emailPopup_content'> 
    Hi user, 
    Thank you! 
    </div> 
</div>

jQuery olarak yazma yapmanız gereken kullanıyor:

$(document).ready(function() { 
    $('.emailPopup').colorbox({inline:true, width:"380px",height:"410px"}); 
});

Açıklama:

<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

kaynak

2015-09-29 12:23:01 KNU

Işık kutusu eklentisi renk kutusu nasıl kullanılır?

cevap

İlgili konular