Getting Started

Include script in your HTML document.

<script src="path/to/jquery.js"></script>
<script src="path/to/dialogify.min.js"></script>

Disable Css Injection

所有樣式跟圖片都塞進 js 了，不用另外載入 css
要自訂樣式的話（像是暗色版），將 id="dialogifyCss" 的 css 放在 js 前
不然 inject css 是 inline 形式，優先權比 css 檔案高

<link href="path/to/dialogify.css" id="dialogifyCss" rel="stylesheet" type="text/css">

Dialogify

let dialogify = new Dialogify(source, dialogOptions)
    .title(title)
    .buttons([button, buttonHtml...], buttonOptions)
    .on('show', showCallback)
    .on('close', closeCallback)
    .on('cancel', cancelCallback);

dialogify.show();
dialogify.showModal();
dialogify.close();
dialogify.isOpen();

source: string

dialogOptions: {}, optional

dialogOptions.dialog: {}

dialogOptions.closeButton: {}

title: string

button: {}

buttonHtml: string

buttonOptions: {}, optional

showCallback, closeCallback, cancelCallback: function

dialogify method & public variable

Global Config (optional)

全域設定，需寫在載入 dialogify.js 之前，沒特別需求可不設定

<script>window.dialogifyConfig = {locale: 'en_US'};</script>
<script src="path/to/dialogify.min.js"></script>

dialogifyConfig: {}

Example - Normal Dialogify

<script type="text/template" id="demo1_template">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a sapien lacus. Ut a eros quis lacus auctor aliquet eu.
    <input type="text" class="text-field" placeholder="title">
    <textarea class="text-field" placeholder="content"></textarea>
</script>
<script>
// 用 text/template 放燈箱的 html，瀏覽器會略過未知的 script type
// 比在元素上加 display:none 效能來得好
new Dialogify('#demo1_template')
    .title('Dialogify')
    .buttons([
        {
            text: '取消',
            click: function(e){
                console.log('cancel click');
                this.close();
            }
        },
        {
            text: '確定',
            type: Dialogify.BUTTON_PRIMARY,
            click: function(e){
                console.log('ok click, title value: ' + this.$content.find('input.text-field').val());
            }
        }
    ])
    .show();
</script>

Example - Modal Dialogify

let html = '<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a sapien lacus. Ut a eros quis lacus auctor aliquet eu.</b>';
let dialogify = new Dialogify(html)
    .title('Modal Dialogify')
    .buttons([
        {
            type: Dialogify.BUTTON_DANGER,
            click: function(e){
                console.log('danger-style button click');
                this.close();
            }
        },
        '<a class="btn btn-insert" href="javascript:;">other action</a>'
    ], {position: Dialogify.BUTTON_CENTER});

dialogify
    .on('show', function(){
        this.$buttonList[1].disable();
        console.log('show: ' + this.isOpen());
    })
    .on('close', function(){
        console.log('close: ' + this.isOpen());
    })
    .on('cancel', function(){
        console.log('cancel');
    });

dialogify.showModal();

Example - Ajax Dialogify

var options = {
    ajaxPrefix: '',
    ajaxComplete: function(){
        console.log('ajax complete');
        this.buttons([{
            type: Dialogify.BUTTON_PRIMARY
        }]);
    }
};

new Dialogify('./ajax.html', options)
    .title('Ajax Dialogify')
    .show();

Example - Style Dialogify

let options = {
    dialog: {
        style: {'background-color': 'transparent', 'box-shadow': 'none'},
        contentClassName: 'custom-content'
    },
    closeButton: {
        image: 'img/x.png',
        className: 'custom-close'
    }
};

let html = '<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a sapien lacus. Ut a eros quis lacus auctor aliquet eu.</b>';
new Dialogify(html, options)
    .title('Style Dialogify')
    .buttons([
        {
            type: Dialogify.BUTTON_PRIMARY
        }
    ])
    .show();

Dialogify.alert(message, options)

message: string

options: {}, optional

Dialogify.alert('Alert <i>Message</i>', {
    close: function(){
        console.log('alert close');
    }
});

// same as
Dialogify.alert('Alert <i>Message</i>')
    .then(() => console.log('alert close'));

// same as
async function() {
    await Dialogify.alert('Alert <i>Message</i>')
    console.log('alert close');
}

Dialogify.confirm(message, options)

message: string

options: {}, optional

Dialogify.confirm('Do you like Dialogify ?', {
    ok: function(){
        Dialogify.alert('Yes, I do');
    },
    cancel: function(){
        Dialogify.alert('No, I don\'t');
    }
});

// same as
async function() {
    if(await Dialogify.confirm('Do you like Dialogify ?')) {
        Dialogify.alert('Yes, I do');
    } else {
        Dialogify.alert('No, I don\'t');
    }
}

Dialogify.prompt(message, options)

message: string

options: {}, optional

Dialogify.prompt('What\'s your name ?', {
    placeholder: 'Enter your name',
    ok: function(val){
        Dialogify.alert('Hi! ' + val);
    },
    cancel: function(){
        Dialogify.alert('canceled');
    }
});

// same as
async function(){
    const name = await Dialogify.prompt('What\'s your name ?', {
        placeholder: 'Enter your name'
    });

    if (name != null) {
        Dialogify.alert('Hi! ' + name);
    } else {
        Dialogify.alert('canceled');
    }
}

Dialogify.closeAll()

關閉所有 dialogify 燈箱