jQuery对话框插件dialog元素

jQuery对话框插件dialog元素

这是一款jQuery对话框插件。该对话框插件使用dialog元素和 HTMLDialogElement API来制作对话框, 可以生成漂亮的对话框效果。

使用方法
在页面中引入jquery和dialogify.min.js文件和样式文件dialogify.css。

1
2
3
<link rel="stylesheet" href="css/dialogify.css">
<script src="path/to/jquery.js"></script>
<script src="path/to/dialogify.min.js"></script>

初始化插件
最简单的使用方法如下:

1
Dialogify.alert('这是一个Alert');

可以创建带确认和取消按钮的对话框。

1
2
3
4
5
6
7
8
Dialogify.confirm('Are You Sure?', {
  ok: function(){
    // confirm callback
  },
  cancel: function(){
    // cancel callback
  }
});

也可以创建prompt对话框。

1
2
3
4
5
6
7
8
9
Dialogify.prompt('What\'s your name ?', {
  placeholder: 'Enter your name',
  ok: function(val){
    Dialogify.alert('Hi! ' + val);
  },
  cancel: function(){
    Dialogify.alert('canceled');
  }
});

还可以通过面板创建自定义的对话框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type="text/template" id="template">
    Modal Content Here
</script>
 
new Dialogify('#template')
    .title('Dialogify') // dialog title
    .buttons([ // custom buttons
        {
          text: 'Cancel',
          click: function(e){
              console.log('cancel click');
              this.close();
          }
        },
        {
          text: 'Okey',
          type: Dialogify.BUTTON_PRIMARY,
          click: function(e){
              console.log('ok click, title value: ' + this.$content.find('input.text-field').val());
          }
        }
    ])
    .show(); // shows the modal
});

通过HTML标签创建对话框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let html = 'modal content here';
 
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.showModal();

通过ajax调用内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var options = {
    ajaxPrefix: '',
    ajaxData: {var1: 'hello world'},
    ajaxComplete: function(){
      console.log('ajax complete');
      this.buttons([{
          type: Dialogify.BUTTON_PRIMARY
      }]);
    }
};
 
new Dialogify('ajax.html', options)
    .title('Ajax Dialogify')
    .show();

文件信息:

    2

    发表评论