@armino-dev/jquery-timed-dialog
v1.1.6
Published
A jQuery timed dialog UI
Downloads
27
Maintainers
Readme
jQuery Timed Dialog plugin
A jquery plugin for creating a timed modal dialog
- Under development
Getting started
Install the jQuery and the jQuery timed dialog.
Using npm
npm i jquery
npm i @armino-dev/jquery-timed-dialog
Import the components into your script.
import $ from 'jquery';
import timedDialog from '@armino-dev/jquery-timed-dialog';
Import the css into your stylesheet.
import '@armino-dev/jquery-timed-dialog/dist/timed-dialog.min.css';
Directly into your html from node_modules
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/@armino-dev/jquery-timed-dialog/dist/timed-dialog.min.js"></script>
<link rel="stylesheet" href="node_modules/@armino-dev/jquery-timed-dialog/dist/timed-dialog.min.css" />
Directly into your html from cdn
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://esm.sh/@armino-dev/jquery-timed-dialog/dist/timed-dialog.min.js"></script>
<link rel="stylesheet" href="https://esm.sh/@armino-dev/jquery-timed-dialog/dist/timed-dialog.min.css" />
Use it
const myCallback = () => {
console.log('The callback was executed!');
}
const options = {
type: 'confirmation',
title: 'Confirm callback execution',
body: '<p>Are you sure you want to execute myCallback?<br/><span style="font-size: 12px; padding:10px 0;">Check the console</span></p>',
width: 400,
height: 280,
timeout: 10,
closeOnTimer: true,
btnConfirm: {
text: 'Execute my callback',
action: () => myCallback(),
}
};
document.addEventListener("DOMContentLoaded", () => {
// add a button to dom
const button = document.createElement('button');
button.textContent = 'Show dialog';
// add a click event listener to the button
button.addEventListener("click", () => {
$().timedDialog(options);
});
// add the button to page
document.body.appendChild(button);
});
Please take a look at this working example on CodePen.
Demo
Demo can be viewed on here
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update the specs(tests) as appropriate.