Custom Modal Dialog Plugin - cxDialog

cxDialog is a simple lightweight yet highly customizable JavaScript plugin used to create modal style dialog popups for alert, confirm and prompt boxes.

How to use it:

1. Load the cxDialog's JavaScript and CSS in the document.

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

2. Create a basic dialog box with one JS call.

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

3. Create a confirm dialog box.

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

4. Customize your dialog boxes with following JS options.

// 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 methods.

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

Changelog:

v2.0 (2022-06-06)

• Removed jQuery dependency
• Updated demo page
• Updated doc

2021-10-09

• v1.3

2021-07-14

• updated stylesheet

2017-03-31

• bugfix

2016-04-01

• Improvement for zepto.js

2016-01-12

• Fixed centering issue.

2016-01-11

• v1.2.2

2015-01-13

• fixed bugs.

---

This awesome jQuery plugin is developed by ciaoca. For more Advanced Usages, please check the demo page or visit the official website.