Modal
The modal works thanks to the Overlay atom, which in turn is based on the store overlay. The modal molecule is the central window, displayed on a transparent background. The modal contains the space where you can user ModalHeader and ModalFooter. There can be any content in between.
ModalBosons
Blocked
Is overlay can't be closed.
type:
booldefault:
falseWidthauto
Is width has auto value.
type:
booldefault:
falsePreview
Preview mode for documentation.
type:
booldefault:
falseId
Id of Modal.
type:
stringdefault:
modalExamples
Default modal
default
Deactivate account
Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone
1// Default modal example with ModalHeader and ModalFooter
2
3@atoms.Button(
4 &atoms.ButtonBosons{
5 Title: "Open modal",
6 Attrs: gopress.Attrs{
7 "data-x-bind": "{ 'data-x-on:click'() { $store.overlay.show('modal') } }",
8 },
9 },
10)
11@atoms.Modal(&atoms.ModalBosons{}) {
12 @molecules.ModalHeader("horizontal") {
13 @molecules.ModalHeaderClose("Close")
14 @molecules.ModalHeaderHero(false) {
15 @protons.IconHero(
16 &protons.IconHeroBosons{
17 Size: "lg",
18 },
19 ) {
20 @icons.IconTimes()
21 }
22 }
23 @molecules.ModalHeaderContent("Deactivate account", "left") {
24 Are you sure you want to deactivate your account? All of your data will be ...
25 }
26 }
27 @molecules.ModalFooter(false) {
28 @molecules.ModalFooterButtons(false) {
29 @atoms.Button(
30 &atoms.ButtonBosons{
31 Size: "md",
32 Title: "Accept action",
33 Full: true,
34 Attrs: gopress.Attrs{
35 "data-x-bind": "{ 'data-x-on:click'() { $store.overlay.close() } }",
36 },
37 },
38 )
39 }
40 }
41}The modal supports locking the scroll position, and additionally, to avoid the width jump effect, set:
1body {
2 overflow-y: scroll;
3 }