The modal component is overlays a box on top of the main content, with a semi-transparent background that dims the rest of the interface.
modal.show opens the modal and displays it with a custom DOMElement received as an argument.
import live-web.dom
import live-web-view.button
import live-web-view.overlay
import live-web-view.contentstatic any[] use = [PrimaryButton, Modal, Content]Modal{ id: modal }
PrimaryButton{
T`Open Modal.`
on click: (e) => {
e.preventDefault()
modal.show(Content{ extraClasses: ['modal-box']
H1`Modal Title`
P`Click outside this box to close.`
})
}
}import live-web.dom
import live-web-view.button
import live-web-view.overlay
import live-web-view.content
import live-web-view.layoutstatic any[] use = [Modal, PrimaryButton, Content, IconButton, Float] Modal{ id: modal }
PrimaryButton{
T`Modal with close button.`
on click: (e) => {
e.preventDefault()
modal.show(Content{ extraClasses: ['modal-box']
Float.('TR'){
IconButton{
Svg{ props: ({width: '15', height: '15', viewBox: '0 0 15 15', xmlns: 'http://www.w3.org/2000/svg'})
Line{ props: ({x1: '0', y1: '0', x2: '15', y2: '15', stroke: 'currentColor'})
}
Line{ props: ({x1: '15', y1: '0', x2: '0', y2: '15', stroke: 'currentColor'})
}
}
on click: () => { modal.hide() }
}
}
H1`Modal Title`
P`Click outside this box or on the 'x' button to close.`
})
}
}import live-web.dom
import live-web-view.overlay
import live-web-view.content
import live-web-view.buttonstatic any[] use = [Modal, PrimaryButton, ModalConfirmBox]Modal{ id: modal }
PrimaryButton{
T`Confirm Message box.`
on click: (e) => {
e.preventDefault()
modal.show(
ModalConfirmBox{
title: 'Confirm'
message: 'Confirm this message'
yes: () => { console.log('Confirmed'); modal.hide(); }
no: () => { console.log('Not Confirmed'); modal.hide(); }
}
)
}
}The following example is a starting point for a modal rendered on the server side or in a static website without using DOMAttach element.
The box property is already defined, and inside DOMBehavior we only trigger the visible property.
Click outside this box to close.
import live-web.dom
import live-web.behavior
import live-web-view.overlay
import live-web-view.content
import live-web-view.buttonstatic any[] use = [Modal, PrimaryButton]Modal{
id: modal
extraClasses: ['my-modal']
box: Content{ extraClasses: ['modal-box']
H1`Modal Title`
P`Click outside this box to close.`
}
}
PrimaryButton{
T`Open Modal.`
DOMBehavior{
domEvents = {
click: (e) => {
const myModal = e.target.parentNode.querySelector('.my-modal')
myModal.classList.add('visible')
}
}
}
}