Clean Reusable Confirmation Dialog Component

Category: Javascript , Modal & Popup | November 8, 2022
Author:YLiJingan
Views Total:160 views
Official Page:Go to website
Last Update:November 8, 2022
License:MIT

Preview:

Clean Reusable Confirmation Dialog Component

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,
})

You Might Be Interested In:


Leave a Reply