Custom Modal Dialog Plugin - cxDialog

File Size: 29.6 KB
Views Total: 6605
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.