https://github.com/kohheepeace/alpinejs-window-confirm
This repo shows how to create global modal equivalent to browser window.confirm with Alpinejs
https://github.com/kohheepeace/alpinejs-window-confirm
alpinejs confirm
Last synced: 7 months ago
JSON representation
This repo shows how to create global modal equivalent to browser window.confirm with Alpinejs
- Host: GitHub
- URL: https://github.com/kohheepeace/alpinejs-window-confirm
- Owner: kohheepeace
- Created: 2022-03-08T11:51:10.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-03-09T10:14:12.000Z (over 3 years ago)
- Last Synced: 2025-01-28T00:17:45.100Z (8 months ago)
- Topics: alpinejs, confirm
- Language: HTML
- Homepage: https://stackblitz.com/edit/web-platform-nwc4sm
- Size: 8.06 MB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Intro
This is a repository that shows how to create a global modal which is equivalent to browser `window.confirm` with Alpinejs.
You can call `window.customConfirm` to get boolean `true` or `false` like below.
```html
isConfirmed = await window.customConfirm({...});
console.log(isConfirmed) // 👈 true or false
```
## Step 0: Setup project
Please create Static HTML project at [https://stackblitz.com/](https://stackblitz.com/)
We, only use two files
- `index.html`
- `script.js`
In `index.html`, add Alpine.js cdn
```html
...
```
## Step 1: Define `window.customConfirm` and assign it to `@click` on button
In `script.js`
```js
window.customConfirm = () => {
console.log('customConfirm called');
};
```
In `index.html`
```html
open dialog
```
Now, we defined `window.customConfirm` function and can call it from button by using Alpinejs.
## Step 2: Add Modal
In this step, we're going to add modal.
Please modify `index.html` like below.
`index.html`
```html
open dialog
Modal Title
Modal message
Cancel
OK
```
## Step 3: Add Alpine Store
To handle modal's `open` state, let's add [Alpine store](https://alpinejs.dev/globals/alpine-store).
`script.js`
```js
document.addEventListener('alpine:init', () => {
Alpine.store('confirmModal', {
open: false,
toggle() {
this.open = !this.open;
},
});
});
```
Then in `index.html`
```html
...
Modal Title
Modal message
Cancel
OK
```
And then,
`script.js`
```js
window.customConfirm = () => {
Alpine.store('confirmModal').toggle();
};
```
Now we can toggle modal like below.
## Step 4: Add function `onOk` and `onCancel`
In this step, we're going to add function when modal OK and Cancel is clicked.
`script.js`
🚫 Note: this code is for showing wrong implementation.
```js
document.addEventListener('alpine:init', () => {
Alpine.store('confirmModal', {
open: false,
toggle() {
this.open = !this.open;
},
onOk() {
console.log('onOk clicked');
return true;
},
onCancel() {
console.log('onCancel clicked');
return false;
},
});
});
```
Then in `index.html`
```html
...
open dialog
Modal Title
Modal message
Cancel
OK
...
```
Now, we can assign `onOk` and `onCancel` function to buttons in modal.
🚫 **But**, it does not return boolean `true` or `false` value.
In the next step, we will learn how to fix this issue.
## Step 5: Promise
To get boolean value from `window.customConfirm`, we need to use `Promise`.
For example, let's re write `window.customConfirm`
`script.js`
```js
window.customConfirm = () => {
return new Promise((resolve, reject) => {
resolve(true);
// resolve(123) 👈 try returning various values by using `resolve`
// resolve("hoge")
});
// Alpine.store('confirmModal').toggle();
};
```
And in `index.html`
```html
open dialog
```
Alpine `@click` does not need to declare `async`, just using `await` is enough.
You will see now, `window.customConfirm` returns boolean `true` value in console.
## Step 6: Assign `resolve(true)` to `onOk` and `onCancel`
First we make store `onOk` and `onCancel` blank function at begining.
```js
document.addEventListener('alpine:init', () => {
Alpine.store('confirmModal', {
open: false,
toggle() {
this.open = !this.open;
},
onOk() {},
onCancel() {},
});
});
```
Then modify `window.customConfirm` like below.
```js
window.customConfirm = () => {
return new Promise((resolve, reject) => {
const confirmModal = Alpine.store('confirmModal');
// Open Modal
confirmModal.open = true;
// Assign logic: when OK button is clicked, close modal and return true
confirmModal.onOk = () => {
confirmModal.open = false;
resolve(true);
};
// Assign logic: when Cancel button is clicked, close modal and return false
confirmModal.onCancel = () => {
confirmModal.open = false;
resolve(false);
};
});
};
```
By doing this, we override `onOk` and `onCancel` logic when `window.customConfirm` is called to return boolean `true` or `false`.
## Finish!
This is the final code of this tutorial.
https://web-platform-rrgo1m.stackblitz.io
## Realworld example with Tailwind
And this is a confirm modal with tailwind which is shown in Intro section.
https://stackblitz.com/edit/web-platform-nwc4sm
## Refs
👋 This example is totaly inspired by this great stackoverflow answer
https://stackoverflow.com/a/58891905/6037441