-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy path11-customEvents.html
68 lines (63 loc) · 1.92 KB
/
11-customEvents.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Easy Installation: https://alpinejs.dev/essentials/installation -->
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<title>Alpine.js : Declare & React</title>
</head>
<style>
.modal-wrapper{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: gray;
}
.modal-inner{
width: 100%;
max-width: 30%;
background-color: white;
padding:20px
}
[x-cloak] { display: none !important; }
</style>
<body>
<!--
Custom Events
https://alpinejs.dev/essentials/events
Great way to interact with components that are not nested
-->
<div
class="modal-wrapper"
x-data="{
open : false,
message : '',
openModal( message ){
this.open = true
this.message = message
}
}"
x-cloak
x-show="open"
@open-modal.window="openModal( $event.detail.message )"
@keyup.escape.window="open=false"
>
<div
class="modal-inner"
@click.outside="open = false"
>
<button
class="float-end"
@click="open=false"
>
X
</button>
<span x-text="message"></span>
</div>
</div>
<button x-data @click="$dispatch( 'open-modal', { message : 'What a beautiful message'} )">Open Modal</button>
</body>
</html>