Clean Reusable Confirmation Dialog Component

Preview:

Description:

A minimal, clean, animated, reusable, and iOS-style confirmation dialog component written in vanilla JavaScript.

How to use it:

1. Download and import the reusableConfirmDialog component.

<link rel="stylesheet" href="./dialog/style.css" />
<script src="./dialog/index.js"></script>

2. Present a confirmation dialog to the user so they may confirm an action or set of actions, settings changes, etc.

window.dialog.show({
  content: 'Are you sure want to continue?',
  okText: 'Yes',
  cancelText: 'Cancel',
  onOk: () => { console.log('You clicked Yes button') },
  onCancel: () => { console.log('You clicked cancel button') }
})

3. Change the default animation.

• 1 = slide up/down
• 0 = fade in/out

window.dialog.show({
  content: 'Are you sure want to continue?',
  okText: 'Yes',
  cancelText: 'Cancel',
  onOk: () => { console.log('You clicked Yes button') },
  onCancel: () => { console.log('You clicked cancel button') },
  animation: 0
})

4. Determine whether to hide the background overlay.

window.dialog.show({
  content: 'Are you sure want to continue?',
  okText: 'Yes',
  cancelText: 'Cancel',
  onOk: () => { console.log('You clicked Yes button') },
  onCancel: () => { console.log('You clicked cancel button') },
  maskDisabled: true,
})