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 $.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.