dd

jQuery cxDialog 对话框


cxDialog 是基于 jQuery 的对话框插件,支持自定义外观样式,同时兼容 Zepto,方便在移动端使用。

  • 版本:
  • jQuery v1.7+ | Zepto v1.0+
  • jQuery cxDialog v1.2.2

  • github地址

* 兼容 Zepto,需要 data 模块 支持

在线实例

实例预览 基础示例

实例预览 内容设定

实例预览 添加按钮

实例预览 外观样式

实例预览 API 接口

实例预览 支持 AMD 规范

实例预览 兼容 Zepto

默认效果

$.cxDialog('Hello World!');

模态对话框

$.cxDialog({ 
  title: 'cxDialog'
  info: '欢迎使用 cxDialog 对话框!'
  lockScroll: true, 
  background: '#000' 
});

使用方法

载入 CSS 文件

<link rel="stylesheet" href="jquery.cxdialog.css">

载入 JavaScript 文件

<script src="jquery.js"></script> 
<script src="jquery.cxdialog.js"></script>

调用 cxDialog

$.cxDialog('内容'); 
 
$.cxDialog('内容'function(){ 
  // click ok callback 
}function(){ 
  // click no callback 
}); 
 
$.cxDialog({ 
  title: '标题'
  info: '内容'
  ok: function(){ 
    // code 
  }
  no: function(){} 
});

设置全局默认值

$.cxDialog.defaults.title = '提示';

参数说明

名称默认值说明
title''标题
info''内容。可设置为文本内容,或 DOM 元素。
oknull点击确认时的回调函数
okText'确 定'确认按钮显示的文字
nonull点击取消时的回调函数
noText'取 消'取消按钮显示的文字
buttons[]自定义按钮
closeBtntrue是否显示关闭按钮
lockScrollfalse是否锁定滚动
baseClass''给对话框容器增加 class,不会覆盖默认的 class。
background''

遮罩背景的颜色,留空为透明遮罩。

可设置为:HEX、RGBA 等格式的颜色值,或 CSS background 属性支持的值。

如不需要遮罩背景,设为:false

width0提示框固定宽度
height0提示框固定高度
zIndex0提示框的层级

buttons 参数

名称说明
text按钮显示的文字
callback回调函数

API 接口

名称说明
$.cxDialog.close()关闭对话框

下载地址