All geek questions in one place

What is the correct reflector-dom way to handle modal dialogue?

I am just starting with reflex-dom , and I cannot figure out how to properly and conveniently work with dialog boxes.

Displaying a dialogue usually means adding several elements to the end <body>and deleting it when the user clicks on a button, creates a background or clicks, for example. the escape. However, to do this from some embedded widget means to somehow activate the event ("show dialogue") to the top, which can be quite awkward. Is there any other way to make it beautiful? I just looked at markup.rocks and seems to be using some JS / jQuery hacks.

I may decide not to use modal dialogs (this may not be a bad option after all), but for some things I may really need this.

+4
source share
1 answer

Ultimately, I found this pretty easy:

First enter the item body:

getBody = do
  root <- askDocument
  Just nodelist <- getElementsByTagName root ("body" :: String)
  Just body <- nodelist `item` 0
  return body

Then, if trigger- this Event, which causes the opening of the dialogue, and visible- this Dynamic t Bool, which contains the current state, we can create a background and transfer it to the end of the body:

backdropAttr <- forDyn visible (\vis -> if vis then ("class" =: "modal-backdrop fade in")
                                          else ("style" =: "display:none"))
(backdrop, _) <- elDynAttr' "div" backdropAttr blank
body <- getBody
let moveBackdrop = (const $ (appendChild body (Just $ _el_element backdrop))) `fmap` trigger
performEvent_ $ void `fmap` moveBackdrop
+3
source

Source: https://habr.com/ru/post/1615898/

More articles:


All Articles