modal

fun modal(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass? = null, id: String? = null, prefix: String = "modal", build: ModalComponent.(SimpleHandler<Unit>) -> Unit): SimpleHandler<Unit>

This component provides some modal dialog or messagebox. Basically it just offers a `div` that is rendered on a higher z-index than the rest of the application. It uses the reserved segments provided by the dev.fritz2.styling.theme.ZIndices.modal function that are initialized by dev.fritz2.styling.theme.Theme.zIndices. That way the top modal will always have the highest `z-index` and therefore be on top of the screen.

The content and structure within the modal are completely free to model. Further more there are predefined styles to easily choose a fitting size or to choose some other variants of appearance. Last but not least there is a simple closeButton predefined that automatically closes the modal. Of course the closing mechanism is free to be applied with a custom solution, as a SimpleHandler<Unit> is injected as parameter into the build expression.

As this factory function also returns a SimpleHandler<Unit>, it is easy to combine it directly with some other component that offers some sort of Flow, like a clickButton.

Have a look at some example calls

// use integrated close button
clickButton {
text("Open")
} handledBy modal {
hasCloseButton(true) // enable the integrated close button
items { // provide arbitrary content
p { +"Hello world from a modal!" }
p { +"Please click the X to close this..." }
}
}

// apply custom close button
clickButton {
text("Open")
} handledBy modal { close -> // SimpleHandler<Unit> is injected by default
items {
p { +"Hello world from a modal!" }
p { +"Please click the X to close this..." }
clickButton { text("Close") } handledBy close // define a custom button that uses the close handler
}
}

For details about the configuration possibilities have a look at ModalComponent.

See also

Parameters

baseClass

optional CSS class that should be applied to the element

build

a lambda expression for setting up the component itself. Details in ModalComponent be aware that a SimpleHandler<Unit> is injected in order to apply it to some closing flow inside!

id

the ID of the element

prefix

the prefix for the generated CSS class resulting in the form `$prefix-$hash`

styling

a lambda expression for declaring the styling as fritz2's styling DSL