Modal Dialog Box Plugin Based On jQuery

cxDialog is a jQuery-based dialog plugin that supports custom appearance styles, is Zepto compatible, and is suitable for portable use. This jQuery plugin is used to generate popups in modal style dialog for alert, confirmation, and prompt.

Starting with version 2.0, the jQuery dependency has been removed. If you need to use the old version, you can check the v1 branch.

Must Read: Simple Modal Solution Using Pure JavaScript and CSS | bp-modal.js

Table of Contents

How to make use of it:

1. Introducing the browser:

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

2. Install from NPM, imported as a module:

npm install cxdialog

import 'cxdialog.css';
import cxDialog from 'cxdialog';

3. use:

// 简易的方式
cxDialog('内容');

cxDialog('内容', () => {
  // click ok callback
}, () => {
  // click no callback
});

// 传入参数
cxDialog({
  title: '标题',
  info: '内容',
  ok: () => {},
  no: () => {}
});

4. Set default parameters:

cxDialog.defaults.title = '提示';

参数说明 Parameter

Must Read: Create Bootstrap 4 Modals In Pure JavaScript | Bootstrap Show Modal

名称	类型	默认值	说明
title	string	”	标题
info	string element	”	内容，可设置为文本内容，或 DOM 元素
ok	function	undefined	确认按钮回调函数 ※ 值为 `function` 类型时，才会显示对应按钮
no	function	undefined	取消按钮回调函数
okText	string	‘确定’	确认按钮文字
noText	string	‘取消’	取消按钮文字
buttons	array	[]	自定义按钮
baseClass	string	”	追加样式名称，不会覆盖默认的 class
maskClose	boolean	true	是否允许点击遮罩层关闭对话框