你的位置:首页 > Java教程

[Java教程]jQuery cxDialog 对话框


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

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

  • github地址

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

在线实例

实例预览 基础示例

实例预览 内容设定

实例预览 添加按钮

实例预览 外观样式

实例预览 API 接口

实例预览 支持 AMD 规范

实例预览 兼容 Zepto

默认效果

  1. $.cxDialog('Hello World!');
复制

模态对话框

  1. $.cxDialog({ 
  2.   title: 'cxDialog', 
  3.   info: '欢迎使用 cxDialog 对话框!', 
  4.   lockScroll: true, 
  5.   background: '#000' 
  6. });
复制

使用方法

载入 CSS 文件

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

载入 JavaScript 文件

  1. <script src="jquery.js"></script> 
  2. <script src="jquery.cxdialog.js"></script>
复制

调用 cxDialog

  1. $.cxDialog('内容'); 
  2.  
  3. $.cxDialog('内容', function(){ 
  4.   // click ok callback 
  5. }, function(){ 
  6.   // click no callback 
  7. }); 
  8.  
  9. $.cxDialog({ 
  10.   title: '标题', 
  11.   info: '内容', 
  12.   ok: function(){ 
  13.     // code 
  14.   }, 
  15.   no: function(){} 
  16. });
复制

设置全局默认值

  1. $.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()关闭对话框

下载