Press "Enter" to skip to content

Modal Dialog Box Plugin Based On jQuery | cxDialog

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

nameDefaultsDescription
titletitle
infocontent. Can be set to text content, or DOM element.
oknullCallback function when click confirm
okText‘determine’The text displayed by the confirm button
nonullCallback function when cancel is clicked
noText‘cancel’The text displayed by the cancel button
buttons[]Custom button
closeBtntrueWhether to show the close button
lockScrollfalseWhether to lock scrolling
baseClassAdding a class to the dialog container will not overwrite the default class.
backgroundThe 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
width0Prompt box fixed width
height0Prompt box fixed height
zIndex0The level of the prompt box

Buttons attribute parameter

nameDescription
textThe text displayed by the button
callbackCallback

API interface

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

    Leave a Reply

    Your email address will not be published. Required fields are marked *