Custom Modal Dialog Plugin For jQuery - cxDialog

Custom Modal Dialog Plugin For jQuery - cxDialog
File Size: 12.3 KB
Views Total:
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="css/jquery.cxdialog.css" rel="stylesheet">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="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

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

Change log:

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.