Uni-modal

Pure Javascript Modal Plugin

Gereksinimler

Herhangi bir gereksinime ihtiyaç duymamaktadır.

Yükleme

1-Npm Kullanarak

npm install uni-modal-pure-js

2- Direk indirme yöntemiyle bu adresten indirebilirsiniz. https://github.com/fat19/uni-modal

Kullanım

Sayfaya modal.js i çağırma

<script src="modal.js" type="text/javascript"></script>

Sayfaya modal.css i çağırma

<link href="modal.css" rel="stylesheet" type="text/css" />

Herhangi bir js dosyasının içinde

var modal = new Modal({
    caption: 'Modal Başlık',
    content: 'Modal içerik',
    customClass: 'test',
    animation: 'fade-and-drop',
    fixedHeight: '500px'
    width: {
        mobile: '80%',
        desktop: '500px'
    }
    overlayClose: true,
    closeButton: true,
    callback: function() {
        console.log('Modal Açıldı')
    }
})
// Modal açmak için 
modal.open();

// Modal kapatmak için 
modal.close()

Options

Key	Default	Values	Description
caption	''	String	Bir caption tanımlanmazsa modal başlık boş olarak gelecektir
content	''	String	Modal içerisinde gösterilmek istenen içerik buraya gelecek
customClass	''	String	modal classının yanına yeni class eklenerek özelleştirme yapılabilir
animation	''	fade-and-drop	Bu özellik kullanılarak yukarıdan aşağıya düşme efekti verilebilir
fixedHeight	''	String	Modala sabit bir yükseklik verilebilir.
width	M:80vw, D: 500px	String veya Object	Sabit bir width verilerek veya mobile ve desktop için ayrı ayrı width verilebilir
overlayClose	true	Boolean	Overlaya tıklayınca modal ın kapanıp açılma durmunu ayarlar
closeButton	true	Boolean	Closebutton un kapatılıp açılmasını ayarlar
callback	funciton	Function	Modal açıldıktan sonra yapılmak istenen işlemler var ise burada yapılabilir

width options ile ilgili

Width options hem string hemde object bir değer alabilir.

• Sabit bir width değeri verilerek tüm cihazlarda aynı genişlikte olması sağlanabilir. Örneğin;

width: '500px'

• width bir obje olarak da tanımlanabilir. Width objesi mobile ve desktop adında iki farklı değer alır. 1200px in altında mobile için geçerli değer çalışırken, 1200px yukarısında ise desktop içine yazılmış olan değer çalışır.

width: {
    mobile: '80%',
    desktop: '300px'
}

Modal açık iken yeni bir modal çağrılırsa

Modal her açıldığında window objesinin altına isModalActive = true şeklinde bir değer atar ve yeni bir modal çağrıldığında kullanıcının hangi optionsları gönderdiğine bakılmaksızın sadece caption ve content özelliği değiştirilir.

// Modal açık iken ikinci bir modal açıkmak istenirse sadece caption ve content gönderilir. Diğer optionslar gönderilse bile geçersiz olacaktır. 
var modal = new Modal({
    caption: 'Modal Başlık',
    content: 'Modal içerik'
})
 

Authors

• Fatih Altın

License

This project is licensed under the MIT License - see the LICENSE.md file for details