漂亮的jQuery对话框插件Dialogify

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

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

tx000142.png

在线预览 下载

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

<link rel="stylesheet" href="css/dialogify.css">
<script src="path/to/jquery.js"></script>
<script src="path/to/dialogify.min.js"></script>
AI 代码解读

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

Dialogify.alert('这是一个Alert');
AI 代码解读

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

Dialogify.confirm('Are You Sure?', {
   
  ok: function(){
   
    // confirm callback
  },
  cancel: function(){
   
    // cancel callback
  }
});
AI 代码解读

也可以创建prompt对话框。

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

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

<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
});
AI 代码解读

通过HTML标签创建对话框。

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();
AI 代码解读

通过ajax调用内容。

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();
AI 代码解读
目录
打赏
0
7
7
0
108
分享
相关文章
|
8天前
jQuery+Slick插件实现游戏人物轮播展示切换源码
jQuery+Slick插件实现游戏人物轮播展示切换源码
32 14
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
63 21
|
1月前
|
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
49 16
|
26天前
|
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
42 9
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
26 2
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
jQuery Lightbox和弹出层插件flashy
Flashy.js是一款响应式jQuery Lightbox和弹出层插件
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等