首页 > 代码库 > jQuery cxDialog 对话框

jQuery cxDialog 对话框

2024-08-17 00:22:17   223人阅读

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 元素。
ok null 点击确认时的回调函数
okText ‘确 定‘ 确认按钮显示的文字
no null 点击取消时的回调函数
noText ‘取 消‘ 取消按钮显示的文字
buttons [] 自定义按钮
closeBtn true 是否显示关闭按钮
lockScroll false 是否锁定滚动
baseClass ‘‘ 给对话框容器增加 class，不会覆盖默认的 class。
background ‘‘

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

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

如不需要遮罩背景，设为：false
width 0 提示框固定宽度
height 0 提示框固定高度
zIndex 0 提示框的层级

buttons 参数

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

API 接口

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

 

jQuery cxDialog 对话框


联系
我们