Doğrudan bir div görüntülemek için fancybox iletişim eklentisi nasıl kullanılır?

Question

İletişim kutuları açmak için JQuery UI kitaplığını kullanan onaylama() adı verilen bir javascript işlevi var. Örneğin

:

jQuery('#confirm-popup').dialog('open'); 

Bu açılır ve id confirm-popup ile bir div oluşturur. İhtiyacım olan bir elastik etkiye sahip olduğu için fantezi kutusuna geçmek istiyorum. Bu yüzden, fancybox'ı kurduktan sonra aşağıdakilerin çalışacağını umuyordum. Bu, işe yaramıyor gibi görünmektedir. Bu, işe yaramıyor gibi görünmektedir. Görebildiğim kadarıyla bir bağlantı etiketinde sadece fancybox() işlevini çağırabilirsiniz. Bağlantı etiketlerini kullanmak istemiyorum çünkü bu benim onaylama işlevini bu etiketlere eşleştirdiğim için bu benim için çok fazla kod değişikliği gerektirecektir.

İdeal olarak div öğesini yakalayıp jQuery UI iletişim yöntemine benzer şekilde göstermek isterim? Fancybox ile bunu yapmanın bir yolu var mı?

Answer 1

Bir div için fantezi kutusunu kullanabilirsiniz, ancak ilk sorum kimliğiniz için # nizi dışarıda bırakıp bırakmadınız? HTML'yi gönderirseniz ve fancybox'ınızın() çağrıldığını, belgenin içinde olması gerektiği için yararlı olur. Ve diyaloğu doğrudan diyalogda açmak yerine, .fancybox() 'ı çağırmak isteyeceksiniz. Eğer bir diyalog olarak Fancybox kullanmak istiyorsanız

<script> 
    $(document).ready(function() { 
     $("#inline").fancybox(); 
    }); 
</script> 
<a id="inline" href="#data">This shows content of element who has id="data"</a> 
<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div> 

Answer 2

, aşağıdaki gibi doğrudan çağırabilirsiniz:

$.fancybox({ 
    'width'    : '60%', 
    'height'    : '65%', 
    'autoScale'   : true, 
    'hideOnContentClick' : false, 
    'href'    : someUrl, 
    'callbackOnShow'  : function(){ ... }, 
    'onClosed'   : function(){...},      
    'type'    : 'iframe' 
}); 

Answer 3

durumda bunu cevapsız, bu fancybox sitesinden örnektir

Bu, fantezi kutusunu doğrudan arayarak <a href> bağlantı öğesine gerek duymadan fantezi kutusunun (1.3.4) nasıl kullanılacağını gösterir.

Satır içi:

<div style="display:none;"> 
    <div id="confirm-popup"> 
     dialog content 
    </div> 
</div> 

$('#myform').submit(function() { 
    $.fancybox({ 
     type: 'inline', 
     content: '#confirm-popup' 
    }); 
}); 

Iframe:

$('#myform').submit(function() { 
    $.fancybox({ 
     type: 'iframe', 
     href: 'http://www.abc123.com' 
    }); 
});