漂亮的jQuery对话框插件Dialogify Modern Dialog & Modal Plugin With jQuery And Dialog Element

Example - Normal Dialogify

try it

<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

try it

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

try it

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

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

Dialogify.alert

try it

Dialogify.alert('Alert <i>Message</i>');

Dialogify.confirm

try it

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

Dialogify.prompt

try it

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