uxrocket.modal

Modal Plugin

Usage no npm install needed!

<script type="module">
  import uxrocketModal from 'https://cdn.skypack.dev/uxrocket.modal';
</script>

README

UX Rocket Modal

Modal plugini, jQuery Colorbox üzerine geliştirilmiştir. Orjinal plugindeki özelliklerin tamamı kullanılabilir. Ayrıca, modal pencere açacak bağlantılara data tanımları ile de ayarları değiştirilebilir. Colorbox kullanımı ile alakalı detayları buradan inceleyebilirsiniz.

<p>Başka bir <a href="http://github.com/uxrocket" class="modal">sayfaya</a> ajax</p>

<p><a href="http://player.vimeo.com/video/2285902" class="modal" data-iframe="true" data-inner-width="500" data-inner-height="409">Flash/Video gösterimi</a> (iframe ile vimeo videosu)</p>

<p>Başka bir <a href="http://www.google.com" class="modal" data-iframe="true" data-width="80%" data-height="80%">sayfaya</a> iframe</p>

<p>Sayfa içindeki <a href="#hidden-content" class="modal" data-inline="true">gizli bir içerik</a> gösterimi.</p>

<p>Callback <a href="http://www.google.com" class="modal" data-iframe="true" data-on-ready="onReady()" data-on-open="onOpen()" data-on-load="onLoad()" data-on-complete="onComplete()" data-on-cleanup="onCleanup"
data-on-closed="onClosed()">örnekleri</a> (console'da tetiklenen callbackleri görebilirsiniz).</p>
var onReady = function(){
    console.log("onReady: Modal plugini elemana bind oldu");
}

var onOpen = function(){
    console.log("onOpen: Modal plugini, pencereyi açıyor.");
}

var onLoad = function(){
    console.log("onLoad: Modal plugini, içeriği yükledi");
}

var onComplete = function(){
    console.log("onComplete: Modal plugini, pencere açılışını ve yüklemeyi tamamladı");
}

var onCleanup = function(){
    console.log("onCleanup: Modal plugini kapanmaya hazırlandı");
}

var onClosed = function(){
    console.log("onClosed: Modal plugini kapandı");
}

Notlar

Ajax formatında ya da inline açılan içeriklerde pencere genişliği yüklenen içeriğin genişliğine göre otomatik olarak belirlenir. Dilenirse, genişlik/yükseklik tanımı ayrıca yapılabilir.

iFrame formatında açılacak içerikler de ise, yükseklik ve genişlik tanımı yapılmalıdır.

Callback tanımlarında, onReady callbacki uxitd-modal plugini tarafından çalıştırılmaktadır. Diğer callbackler ise Colorbox eventlerine göre Colorbox içinden çalışmaktadır.

Tanımlar

Property Default Açıklama
iframe false Pencere içerisine yüklenecek içeriğin iFrame olarak yüklenmesini sağlar.
inline false Pencere içerisine yüklenecek içeriğin sayfa içerisinde bulunan bir eleman olmasını sağlar. Bu içerik bir seçici de olabilir. Bir jQuery objesi de olabilir.
// Using a selector:
$("#inline").modal({inline:true, href:"#myForm"});

// Using a jQuery object:
var $form = $("#myForm");
$("#inline").modal({inline:true, href:$form});
html false Herhangibir yerden çekilecek içerik yerine, doğrudan modal içerisinde gösterilecek bir html ya da text içerik tanımlamanızı sağlar.
$.uxmodal({html:"Hello"});
ajax Başka bir tanım yapılmadığı durumda, pencere içerisine içerikler Ajax ile yüklenir.
href false Açılacak içeriğin URL adresi. modal ile tanımlanmış linkin href attributeündeki URL adresi kullanılmaktadır.
width null Açılan içerik penceresi için ön tanımlı genişlik. Pixel ya da % cinsinden tanımlanabilir.
height null Açılan içerik penceresi için ön tanımlı yüksekli. Pixel ya da % cinsinden tanımlanabilir.
innerWidth false 'width' tanımı için alternatif kullanımdır. Modal içindeki border ve buton genişliklerini hesaplamadan sadece yüklenen içerik kısmının genişliğini belirler.
innerHeight false 'height' tanımı için alternatif kullanımdır. Modal içindeki border ve buton genişliklerini hesaplamadan sadece yüklenen içerik kısmının genişliğini belirler.
maxWidth false Yüklenen içeriğin kendi genişliğinden bağımsız olarak, modal penceresinin maksimum genişliğini belirler.
maxHeight false Yüklenen içeriğin kendi yüksekliğinden bağımsız olarak, modal penceresinin maksimum yüksekliğini belirler.
Data Attribute  
iframe Pencere içerisine yüklenecek içeriğin iFrame olarak yüklenmesini sağlar.
inline Pencere içerisine yüklenecek inline bir elemanın id, class'ı ya da etiketi ni belirtir.
html İçerik olarak gösterilecek HTML ya da Text formatlı metni belirtir.
width Açılan içerik penceresi için ön tanımlı genişlik. Pixel ya da % cinsinden tanımlanabilir.
height Açılan içerik penceresi için ön tanımlı yüksekli. Pixel ya da % cinsinden tanımlanabilir.
inner-width 'width' tanımı için alternatif kullanımdır. Modal içindeki border ve buton genişliklerini hesaplamadan sadece yüklenen içerik kısmının genişliğini belirler.
inner-height 'height' tanımı için alternatif kullanımdır. Modal içindeki border ve buton genişliklerini hesaplamadan sadece yüklenen içerik kısmının genişliğini belirler.
max-width Yüklenen içeriğin kendi genişliğinden bağımsız olarak, modal penceresinin maksimum genişliğini belirler.
maxHeight Yüklenen içeriğin kendi yüksekliğinden bağımsız olarak, modal penceresinin maksimum yüksekliğini
Callback  
onReady Modal plugini elemana bağlandığında çalışacak fonksiyonu çağırır.
onOpen Linke tıklandığında, modal açılmadan önce çalışacak fonksiyonu çağırır.
onLoad Modal açıldığında, içine gösterilecek içerik yüklenmeye başlandığında çalışacak fonksiyonu çağırır.
onComplete Modal penceresine gösterilecek içerik yüklendikten sonra çalışacak fonksiyonu çağırır.
onCleanup Modal penceresi kapanmadan önce çalışacak fonksiyonu çağırır.
onClosed Modal penceresi kapandıktan sonra çalışacak fonksiyonu çağırır.

Public Metodlar

Method Açıklama
$(selector).modal(options) Bu method plugini manuel olarak bir elemana bağlamanızı sağlar.
$.uxmodal Bu method pluginin detayını görmenizi sağlar
$.uxmodal.version Sayfaya eklenmiş pluginin versiyon numarasını gösterir.
$.uxmodal.settings Aktif pluginin ayarlarını gösterir.
$.uxmodal.close() Modal penceresini kapatır.
$.uxmodal.resize() Modal penceresini tekrar boyutlandırır.
$.uxmodal.remove() Modal penceresini sayfadan kaldırır. Bu metod çağrıldıktan sonra, modal penceresinin çalışması iptal edilmiş olur.