A jQuery Plugin To Create A Timed Modal Dialog

The jQuery Timed Dialog plugin helps developers create modal/alert/customizable info dialogs to replace the original popups.

Key Features:

Easy to design with your own CSS.
Auto reject after a timeout, with or without a countdown timer
Supports any HTML content included in the dialog.
It allows you to append the dialog to any container element, not just the entire body.

How to make use of it:

1. Import the jQuery Timed Dialog plugin’s information into the HTML file.

<link href="/path/to/css/timed-dialog.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/timed-dialog.min.js"></script>

2. Create a ‘Info‘ dialog.

$().timedDialog({
  body: '<b>HTML Content</b> is supported as well.',
  title: 'Dialog Title'
});

3. Create a Confirm dialog and execute a function when the user clicks the ‘Confirm‘ button.

$().timedDialog({
  type: 'confirmation',
  body: 'Are You Sure?',
  title: 'Confirm Your Action',
  btnConfirm: {
    text: 'Confirm',
    action: () => {
    alert('done')
  }}
});

4. Customize the width/height of the dialog.

$().timedDialog({
  width: 400,
  height: 300
});

5. Determine auto-close the dialog after a timeout, with an animated countdown timer on the ‘Dismiss’ button.

$().timedDialog({
  closeOnTimer: true,
  timeout: 20,
  timeout: true
});

6. All default configuration choices.

$().timedDialog({
  type: 'info',
  title: 'Info',
  body: 'This is the default body text. You might replace this with your own.',
  width: 320,
  height: 240,
  appendTo: 'body',
  closeOnEscape: true,
  closeOnTimer: false,
  timeout: 10, //ten seconds default timeout
  timeoutAnimation: true,
  isModal: true,
  btnDismiss: {
    text: "Dismiss",
    class: '',
  },
  btnConfirm: {
    text: "Confirm",
    action: () => {
        return
    },
    class: '',
  }
});