Joomla Sitenizde Modal Pencereleri Kullanma

code image
code image

2010 yılında ilk defa MODAL metodu ile karşılaşmıştım. Bu yazdıklarım hala güncellemediyseniz Joomla’nın 1.5 versiyonunda bile çalışacaktır ki Joomla’nın 3 versiyonlarında da çalışmaya devam ediyor. Bir sürü plugin veya addon kurmak yerine bu basit method ile sitenizde istediğiniz nesneyi sayfanın üstüne açılan pencere olarak göstermeniz mümkün. Ama baştan belirtmeliyim mootools ve javascript desteğinin sitenizde olması gerekiyor. Paniklemeye gerek yok genellikle default yüklü olur. Diyelim ki yüklü değil o zaman bootstrap framework yüklü ise o zaman yine aynı çözüme sahip olabiliriz.

Basit Kullanım
Öncelikle şu aşağıdaki php kodunu template’inizin ana HTML sayfası olan index.php dosyası içine ekleyin :

JHTML::_(‘behavior.modal’);

Bu basitçe modal.js ve modal.css dosyalarının sayfanız tarafından çağrılmasını ve yüklenmesini sağlayacaktır.Bu arada elbette mootools javascript’ininde sayfanıza yüklenmesini de sağladığı için modal komutunuz sitenize eklenmiş olacaktır.
Eğer tam olarak nereye yükleneceğini hatırlatmak gerekirse Template Yöneticisine(Manager) girip kullanmış olduğunuz şablonu seçiyorsunuz. Sonra HTML düzenlemeye girip index.php dosyasında kodundan önce ekliyorsunuz.

Sonrası çok daha basit; bu kullanmak istediğiniz nesneyi bir div içerisine alıp ilgili o div’in class bilgisine “modal” değerini atıyorsunuz.

Mesela bir resmi lightbox olarak açmak istiyorsunuz; işte basit bir örnek :

<a class=”modal” href=”http://www.siteniz.com/images/ornekresim.jpg”>
Resmi Görmek için Tıklayınız</a>

ve ya sayfanıza var olan bir html nesnesini ID tagini kullanarak yükleyebilirsiniz:

<div id=”loadDiv”>
Sayfanızda gözükmesini istediğiniz her hangi bir text
</div>

Sonra link oluşturabilirsiniz

<a href=”#loadDiv” class=”modal”>İlgili TEXTi popup görmek için tıklayınız</a>

Seçenekler ve Eylemler
Bazı durumlarda açılan pencerenin boyutunu belirlemek gibi seçeneklere ihtiyacınız olabilir bunu rel etiketi ile yapabilirsiniz.Niye bunu yapmak isteyeceğinizi bilmiyorum ama mobil dünyada bu gerekli olabilir diye düşünüyorum.Fazla bilgi göz çıkarmaz.

<a href=”http://www.orneksite.com/images/myimage.jpg”
class=”modal”
rel=”{size: {x: 480, y: 320}, closable: false}”>
Resim için tıklayınız</a>

Modal scripti bir çok eylem içeriyor : image, iframe, string, ajax,clone(adopt olarak da bilinir, mevcut sayfada nesneyi yeniden yüklemek için kullanılıyor)

Mesela bir websayfasını bir iframe’in içerisine yüklemek için kullanabilirsiniz:

<a href=”http://www.example.com/somepage.html”
class=”modal” rel=”{size: {x: 700, y: 500}, handler:’iframe’}”
id=”modalLink1″>Sayfayı görmek için tıklayınız</a>

About the Author

Melih Melik SÖNMEZ
1976'da İstanbul'da doğdum.