【Javascript】シンプルなモーダルプラグイン。tingle.js

tingle.jsはJavaScriptシンプルなモーダルプラグイン。

インストール

<link rel="stylesheet" href="tingle.min.css">
<script src="tingle.min.js"></script>

Use

// instanciate new modal
var modal = new tingle.modal({
footer: true,
stickyFooter: false,
cssClass: ['custom-class-1', 'custom-class-2']
onOpen: function() {
console.log('modal open');
},
onClose: function() {
console.log('modal closed');
}
});
// set content
modal.setContent('<h1>here some content</h1>');
// add a button
modal.addFooterBtn('Button label', 'tingle-btn tingle-btn--primary', function() {
// here goes some logic
modal.close();
});
// add another button
modal.addFooterBtn('Dangerous action !', 'tingle-btn tingle-btn--danger', function() {
// here goes some logic
modal.close();
});
// open modal
modal.open();
// close modal
modal.close();

オプション

footer Display a footer or not
stickyFooter Set to true for a footer always visible on screen
onOpen Callback to execute when tingle is open (after transition end)
onClose Callback to execute when tingle is closed
cssClass Custom CSS classes that will be added to tingle container

CSS

  1. tingle-btn
  2. tingle-btn–primary
  3. tingle-btn–default
  4. tingle-btn–danger
  5. tingle-btn–pull-left
  6. tingle-btn–pull-right

API

open() Open modal (tingle-enabled class is added on body)
close() Close modal and execute callback if exist
destroy() Destroy modal (remove from dom and unbind events)
setContent(content) Set modal content
getContent() Get modal content
setFooterContent(content) Set footer content
getFooterContent(content) Get footer content
addFooterBtn(label, cssClass, callback) Add buttons to footer (use cssClass for style and positioning)
resize() Recalculate position of the modal
isOverflow() Return true if modal height is bigger than viewport height

MITライセンス

 

【Javascript】シンプルなモーダルプラグイン。tingle.js

  • LATEST
  • RELATED
  • POPULAR