Custom Modal Dialog Plugin For jQuery - cxDialog

Custom Modal Dialog Plugin For jQuery - cxDialog
File Size: 10.7 KB
Views Total: 6149
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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



  • v1.3


  • updated stylesheet


  • bugfix


  • Improvement for zepto.js


  • Fixed centering issue.


  • v1.2.2


  • fixed bugs.

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