自定义模式对话框插件 cxDialog

  • 源码大小:28.77KB
  • 所需积分:1积分
  • 源码编号:19JP-3538
  • 浏览次数:362次
  • 最后更新:2023年06月24日
  • 所属栏目:其他
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

cxDialog是一个简单、轻量级但高度可定制的JavaScript插件,用于为警报、确认和提示框创建模式风格的对话框弹出窗口。

如何使用它:

1.在文档中加载cxDialog的JavaScript和CSS。

<link rel="stylesheet" href="./dist/css/cxdialog.min.css" />
<script src="./dist/js/cxdialog.min.js"></script>

2.创建一个带有一个JS调用的基本对话框。

cxDialog('<p>Hello World!<p><p>I am cxDialog!</p>');

3.创建一个确认对话框。

cxDialog('Are you Sure?', () => {
  // click ok callback
}, () => {
  // click no callback
});

4.使用以下JS选项自定义对话框。

// dialog title
title: '',

// dialog content
info: '',

// confirm action
ok: null,

// text for confirm button
okText: 'Okey',

// cancel action
no: null,

// text for cancel button
noText: 'Cancel',

// custom buttons here
buttons: [],

// custom themes & skins
// Predefined themes: ios or black
baseClass: '',

// close the dialog box on click outside
maskClose: true,

5.API方法。

// close the dialog box
cxDialog.close();

更新日志:

v2.0版本(2022-06-06)

  • 删除了jQuery依赖项
  • 更新的演示页面
  • 更新的文档

2021-10-09

  • 第1.3版

2021-07-14

  • 更新的样式表

2017-03-31

  • 错误修复

2016-04-01

  • 对zepto.js的改进

2016-01-12

  • 修复了定心问题。

2016-01-11

  • v1.2.2版本

2015-01-13

  • 修复了错误。

预览截图