返回介绍

dialog

发布于 2020-01-29 13:50:25 字数 6693 浏览 1084 评论 0 收藏 0

作用

常规弹窗

author leeenx
version 1.0.0
data: 2015-12-12

Official Usage

$.dialog(
  {
    type:"success",
    text:"你好,这是普通的消息",
    closeBtn:{//关闭按钮
      show: 1,//显示,默认为0 -- 不显示
      css: '',//内联样式
      className: '',//样式类名
      attr: {},
      close: 1,//自动关闭弹窗,默认为 1
      cb: function(){
        //点击回调
        this.close();//调用this.close()可以关闭弹窗
      }
    },
    btns:[
      {
        text: "知道了",
        close: 0,//自动关闭弹窗,默认为 1
        cb:function(){
          //点击回调
          this.close();//调用this.close()可以关闭弹窗
        },
        addEvent:{//添加事件
          "touchmove":function(e){
            //调用this.close可以关闭弹窗
            e.stopPropagation();
            console.log("btn move");
          }
        }
      }
    ],
    mask:{//蒙层相关的属性,目前只有css(内联样式),className 类名,attr - 属性(attribute)
      className: '',
      css: '',
      attr: {},
      addEvent:{//添加事件
        "touchmove":function(){
          //调用this.close可以关闭弹窗
          console.log("mask move");
        }
      }
    },
    box:{//窗口相关的属性,目前只有css(内联样式),className 类名,attr - 属性(attribute)
      className: '',
      css: '',
      attr: {},
      addEvent:{//添加事件
        "touchmove":function(e){
          //调用this.close可以关闭弹窗
          e.stopPropagation();
          console.log("box move");
        }
      }
    }
  }
);

Example

//普通文案弹窗
$.dialog(
  {
    text: "普通消息弹窗",
    btns:[
      {
        text: "不可关闭",
        close: 0
      },
      {
        text: "关闭按钮"
      }
    ]
  }
);

// 成功弹窗
$.dialog(
  {
    type: "success",
    text: "成功弹窗",
    close: 1,
    btns:[
      {
        text: "关闭按钮"
      }
    ]
  }
);

// 错误弹窗
$.dialog(
  {
    type: "error",
    text: "错误弹窗",
    close: 1,
    btns:[
      {
        text: "关闭按钮"
      }
    ]
  }
);

// 警告弹窗
$.dialog(
  {
    type: "alert",
    text: "警告弹窗",
    close: 1,
    btns:[
      {
        text: "关闭按钮"
      }
    ]
  }
);

//加载中
$.dialog(
  {
    text: "努力加载中",
    type: "loading"
  }
);

参数列表

name 类型 必选 描述
type string optional 弹窗的类型选项:normal,success,error,alert,loading。默认为normal
text string compulsory 弹窗文案
closeBtn object optional 定义弹窗右上角的关闭按钮的样式与监听事件。详见:closeBtn参数
btns array optional 定义弹窗的按钮组:[btn,btn,…]。 详见:btn参数
mask object optional 定义蒙层的样式与监听蒙层事件。详见:mask参数
box object optional 定义弹窗体的样式与监听事件。详见:box参数

closerBtn参数

name 类型 必选 描述
show boolean optional 是否显示按钮。默认不显示
css string optional 定义按钮的内联样式
className string optional 定义按钮添加一个样式类名(关闭按钮使用外部样式)
attr object optional 为按钮添加attribute属性
close boolean optional 点击关闭弹窗。默认:true
cb function optional 点击事件监听

btn参数

name 类型 必选 描述
text string optional 按钮文案
close boolean optional 点击后关闭弹窗。默认: true
css string optional 定义按钮的内联样式
className string optional 定义按钮添加一个样式类名(关闭按钮使用外部样式)
attr object optional 为按钮添加attribute属性
cb function optional 点击事件监听
addEvent object optional 自定义监听事件。以键值列表的形式同时添加多个事件,具体可以看DEMO

mask参数

name 类型 必选 描述
css string optional 定义按钮的内联样式
className string optional 定义按钮添加一个样式类名(关闭按钮使用外部样式)
attr object optional 为按钮添加attribute属性
addEvent object optional 自定义监听事件。以键值列表的形式同时添加多个事件,具体可以看DEMO

box参数

name 类型 必选 描述
css string optional 定义按钮的内联样式
className string optional 定义按钮添加一个样式类名(关闭按钮使用外部样式)
attr object optional 为按钮添加attribute属性
addEvent object optional 自定义监听事件。以键值列表的形式同时添加多个事件,具体可以看DEMO

DEMO

点击查看dialog

模块下载

http://wq.360buyimg.com/js/ho2/min/uncmd.js
http://wq.360buyimg.com/js/ho2/min/enablea.js
http://wq.360buyimg.com/js/ho2/min/compare.js
http://wq.360buyimg.com/js/ho2/min/stylesheet.js
http://wq.360buyimg.com/js/ho2/min/compare.js
http://wq.360buyimg.com/js/ho2/min/prefix.js
http://wq.360buyimg.com/js/ho2/min/dialog.js

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文