cxDialog is a jQuery-based dialog plugin that supports custom appearance styles, is Zepto compatible, and is suitable for portable use. This jQuery plugin used to generate popups in modal style dialog for alert, confirmation, and prompt.
custom modal popup jquery, jquery modal plugin, modal js plugin which plugin is used to create a dialogue box on link click, modal popup plugin
How to make use of it:
1. Load the jquery.cxdialog.css within the header, and the jquery.cxdialog.js within the footer however 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 primary dialog field with one JS name.
$.cxDialog('<p>Hello World!<p><p>I am cxDialog!</p>');
3. Customize your dialog containers with following JS choices.
// 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 strategies.
// close dialog boxes $.cxDialog.close();
Parameter Description
name | Defaults | Description |
---|---|---|
title | ” | title |
info | ” | content. Can be set to text content, or DOM element. |
ok | null | Callback function when click confirm |
okText | ‘determine’ | The text displayed by the confirm button |
no | null | Callback function when cancel is clicked |
noText | ‘cancel’ | The text displayed by the cancel button |
buttons | [] | Custom button |
closeBtn | true | Whether to show the close button |
lockScroll | false | Whether to lock scrolling |
baseClass | ” | Adding a class to the dialog container will not overwrite the default class. |
background | ” | The color of the background of the mask, leave it blank for a transparent mask. It can be set to: the color value of HEX, RGBA, etc., or the value supported by the CSS background property. If you don’t need to mask the background, set it to: false |
width | 0 | Prompt box fixed width |
height | 0 | Prompt box fixed height |
zIndex | 0 | The level of the prompt box |
Buttons attribute parameter
name | Description |
---|---|
text | The text displayed by the button |
callback | Callback |
API interface
name | Description |
---|---|
$.cxDialog.close() | Close the dialog |
Custom Modal Dialog Plugin, cxDialog Github, jquery message box plugin, popup jquery plugin
See Demo And Download
Official Website(ciaoca): Click Here
This superior jQuery/javascript plugin is developed by ciaoca. For extra Advanced Usages, please go to the official website.
Be First to Comment