2010 y\u0131l\u0131nda ilk defa MODAL metodu ile kar\u015f\u0131la\u015fm\u0131\u015ft\u0131m. Bu yazd\u0131klar\u0131m hala g\u00fcncellemediyseniz Joomla’n\u0131n 1.5 versiyonunda bile \u00e7al\u0131\u015facakt\u0131r ki Joomla’n\u0131n 3 versiyonlar\u0131nda da \u00e7al\u0131\u015fmaya devam ediyor. Bir s\u00fcr\u00fc plugin veya addon kurmak yerine bu basit method ile sitenizde istedi\u011finiz nesneyi sayfan\u0131n \u00fcst\u00fcne a\u00e7\u0131lan pencere olarak g\u00f6stermeniz m\u00fcmk\u00fcn. Ama ba\u015ftan belirtmeliyim mootools ve javascript deste\u011finin sitenizde olmas\u0131 gerekiyor. Paniklemeye gerek yok genellikle default y\u00fckl\u00fc olur. Diyelim ki y\u00fckl\u00fc de\u011fil o zaman bootstrap framework y\u00fckl\u00fc ise o zaman yine ayn\u0131 \u00e7\u00f6z\u00fcme sahip olabiliriz.<\/p>\n
Basit Kullan\u0131m
\n\u00d6ncelikle \u015fu a\u015fa\u011f\u0131daki php kodunu template’inizin ana HTML sayfas\u0131 olan index.php dosyas\u0131 i\u00e7ine ekleyin :<\/p>\n
JHTML::_(‘behavior.modal’); <\/p><\/blockquote>\n
Bu basit\u00e7e modal.js ve modal.css dosyalar\u0131n\u0131n sayfan\u0131z taraf\u0131ndan \u00e7a\u011fr\u0131lmas\u0131n\u0131 ve y\u00fcklenmesini sa\u011flayacakt\u0131r.Bu arada elbette mootools javascript’ininde sayfan\u0131za y\u00fcklenmesini de sa\u011flad\u0131\u011f\u0131 i\u00e7in modal komutunuz sitenize eklenmi\u015f olacakt\u0131r.
\nE\u011fer tam olarak nereye y\u00fcklenece\u011fini hat\u0131rlatmak gerekirse Template Y\u00f6neticisine(Manager) girip kullanm\u0131\u015f oldu\u011funuz \u015fablonu se\u00e7iyorsunuz. Sonra HTML d\u00fczenlemeye girip index.php dosyas\u0131nda<\/code> kodundan \u00f6nce ekliyorsunuz.<\/p>\nSonras\u0131 \u00e7ok daha basit; bu kullanmak istedi\u011finiz nesneyi bir div i\u00e7erisine al\u0131p ilgili o div’in class bilgisine “modal” de\u011ferini at\u0131yorsunuz.<\/p>\n
Mesela bir resmi lightbox olarak a\u00e7mak istiyorsunuz; i\u015fte basit bir \u00f6rnek :<\/p>\n
\n<a class=”modal” href=”http:\/\/www.siteniz.com\/images\/ornekresim.jpg”>
\nResmi G\u00f6rmek i\u00e7in T\u0131klay\u0131n\u0131z<\/a><\/p><\/blockquote>\nve ya sayfan\u0131za var olan bir html nesnesini ID tagini kullanarak y\u00fckleyebilirsiniz:<\/p>\n
<div id=”loadDiv”>
\n Sayfan\u0131zda g\u00f6z\u00fckmesini istedi\u011finiz her hangi bir text
\n<\/div><\/p><\/blockquote>\nSonra link olu\u015fturabilirsiniz<\/p>\n
<a href=”#loadDiv” class=”modal”>\u0130lgili TEXTi popup g\u00f6rmek i\u00e7in t\u0131klay\u0131n\u0131z<\/a><\/p><\/blockquote>\n
Se\u00e7enekler ve Eylemler<\/strong>
\nBaz\u0131 durumlarda a\u00e7\u0131lan pencerenin boyutunu belirlemek gibi se\u00e7eneklere ihtiyac\u0131n\u0131z olabilir bunurel<\/code> etiketi ile yapabilirsiniz.Niye bunu yapmak isteyece\u011finizi bilmiyorum ama mobil d\u00fcnyada bu gerekli olabilir diye d\u00fc\u015f\u00fcn\u00fcyorum.Fazla bilgi g\u00f6z \u00e7\u0131karmaz.<\/p>\n\n<a href=”http:\/\/www.orneksite.com\/images\/myimage.jpg”
\nclass=”modal”
\nrel=”{size: {x: 480, y: 320}, closable: false}”>
\nResim i\u00e7in t\u0131klay\u0131n\u0131z<\/a><\/p><\/blockquote>\nModal scripti bir \u00e7ok eylem i\u00e7eriyor : image, iframe, string, ajax,clone(adopt olarak da bilinir, mevcut sayfada nesneyi yeniden y\u00fcklemek i\u00e7in kullan\u0131l\u0131yor)<\/p>\n
Mesela bir websayfas\u0131n\u0131 bir iframe’in i\u00e7erisine y\u00fcklemek i\u00e7in kullanabilirsiniz:<\/p>\n
<a href=”http:\/\/www.example.com\/somepage.html”
\nclass=”modal” rel=”{size: {x: 700, y: 500}, handler:’iframe’}”
\nid=”modalLink1″>Sayfay\u0131 g\u00f6rmek i\u00e7in t\u0131klay\u0131n\u0131z<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"2010 y\u0131l\u0131nda ilk defa MODAL metodu ile kar\u015f\u0131la\u015fm\u0131\u015ft\u0131m. Bu yazd\u0131klar\u0131m hala g\u00fcncellemediyseniz Joomla’n\u0131n 1.5 versiyonunda bile \u00e7al\u0131\u015facakt\u0131r ki Joomla’n\u0131n 3 versiyonlar\u0131nda da \u00e7al\u0131\u015fmaya devam ediyor. Bir s\u00fcr\u00fc plugin veya addon kurmak yerine bu basit method ile sitenizde istedi\u011finiz nesneyi sayfan\u0131n \u00fcst\u00fcne a\u00e7\u0131lan pencere olarak g\u00f6stermeniz m\u00fcmk\u00fcn. Ama ba\u015ftan belirtmeliyim mootools…<\/p>\n","protected":false},"author":1,"featured_media":300,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,56,94],"tags":[95,96,97,98],"class_list":["post-362","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-genel","category-javascript","category-web-arayuzleri","tag-joomla","tag-lightbox","tag-modal","tag-popup"],"_links":{"self":[{"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/posts\/362","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/comments?post=362"}],"version-history":[{"count":17,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/posts\/362\/revisions"}],"predecessor-version":[{"id":444,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/posts\/362\/revisions\/444"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/media\/300"}],"wp:attachment":[{"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/media?parent=362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/categories?post=362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/tags?post=362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}