Custom Modal Dialog Plugin For jQuery - cxDialog

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

How to use it:

1. Load the jquery.cxdialog.css in the header, and the jquery.cxdialog.js in the footer but after jQuery library.

<link href="/path/to/css/jquery.cxdialog.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/jquery.cxdialog.js"></script>

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

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

3. 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',
buttons: [],

// shows a close button
closeBtn: true,

// lock scroll like a modal
lockScroll: false,

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

// background color
background: '',

// width
width: 0,

// height
height: 0

4. API methods.

// close dialog boxes
$.cxDialog.close();

Changelog:

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.