From 91d52fe470b88f91a1322f7526912b1774c56588 Mon Sep 17 00:00:00 2001 From: Gux Date: Wed, 31 Mar 2021 12:00:10 -0600 Subject: [PATCH] Readme --- README.md | 131 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..2f0e4d6 --- /dev/null +++ b/README.md @@ -0,0 +1,131 @@ +# iModal :: Boostrap 5 + +Dinamic and simple modal generator. Ideal for ajax requests. + +## Usage +``` javascript + + +// Normal +iModal(); + +// Update html body +iModal.body(('Custom html'); + +// Custim id +iModal({id:'my_modal'}); + +// Custom tite +iModal({title:'Hello world'}); + +// Sizes +iModal({size:'sm'}); +iModal({size:''});// Default +iModal({size:'lg'}); +iModal({size:'xl'}); + +// Fullscreen +iModal({fullscreen:true}); +iModal({fullscreen:'sm'}); +iModal({fullscreen:'md'}); +iModal({fullscreen:'lg'}); +iModal({fullscreen:'xl'}); +iModal({fullscreen:'xxl'}); +iModal({fullscreen:false});// Default + +// Custom close button text +iModal({closeText:'Cerrar'}); + +// Custom default body +iModal({body:'Loading'}); + +// Background Class +iModal({bg:'success'}); +iModal({bg:'primary'}); +iModal({bg:'info'}); +iModal({bg:'warning'}); +iModal({bg:'danger'}); +iModal({bg:'secondary'}); +iModal({bg:'dark'}); +iModal({bg:'light'}); + +// Header Class +iModal({headerClass:'success'}); +iModal({headerClass:'primary'}); +iModal({headerClass:'info'}); +iModal({headerClass:'warning'}); +iModal({headerClass:'danger'}); +iModal({headerClass:'secondary'}); +iModal({headerClass:'dark'}); +iModal({headerClass:'light'}); + +// Footer Class +iModal({footerClass:'success'}); +iModal({footerClass:'primary'}); +iModal({footerClass:'info'}); +iModal({footerClass:'warning'}); +iModal({footerClass:'danger'}); +iModal({footerClass:'secondary'}); +iModal({footerClass:'dark'}); +iModal({footerClass:'light'}); + +// Show/hide header +iModal({header:false}); + +// Show/hide footer +iModal({footer:false}); + +// Backdrop +iModal({backdrop:false}); + +// Backdrop color +iModal({backdropColor:false}); +iModal({backdropColor:'success'}); +iModal({backdropColor:'primary'}); +iModal({backdropColor:'info'}); +iModal({backdropColor:'warning'}); +iModal({backdropColor:'danger'}); +iModal({backdropColor:'secondary'}); +iModal({backdropColor:'dark'}); +iModal({backdropColor:'light'}); + +// Keyboard +iModal({keyboard:false}); + +// Dialog scrollable +iModal({dialogScrollable:true}); + +// Vertically centered +iModal({dialogCentered:true}); + +// Fade animation +iModal({fade:false}); + +// Auto Hide +iModal({autoHide:true}); +iModal({autoHide:false});// Default +iModal({autoHide:3000}); + +// Events +iModal({ onShow: function(){ alert('Show'); } }); +iModal({ onShowed: function(){ alert('Showed'); } }); +iModal({ onHide: function(){ alert('Hide'); } }); +iModal({ onHidden: function(){ alert('Hidden'); } }); +iModal({ backdrop: 'static', onHidePrevented: function(){ alert('Hide Prevented'); } }); + +// Methods +iModal.isActive(); // return Boolean +iModal.hide(); // Graceful hidden +iModal.remove(); // Remove iModal +iModal.version; // return iModal version + +// GLOBAL CONFIGURATIONS (after iModal.js) +iModal.setSettings({ + size: 'lg', + title: 'My project', + backdrop: false, +}); +``` + +## Documentation and examples +[https://guxmartin.github.io/iModal/examples/index.html](https://guxmartin.github.io/iModal/examples/index.html)