reflex-dom 处理模态对话框的正确方法是什么？

Question

我刚开始使用 reflex-dom 库，我不太清楚使用对话框的正确和方便的方法。

显示对话框通常意味着在 <body> 的末尾添加一些元素，并在用户单击某些按钮、背景或按下按钮时将其删除，例如逃脱。然而，从一些嵌套的小部件执行此操作意味着以某种方式将事件 ('show the dialog') 冒泡到顶部，这可能非常笨拙。有没有其他方法可以很好地做到这一点？我刚刚看了一下 markup.rocks，它似乎使用了一些 JS/jQuery 技巧。

我可以决定不使用模态对话框（毕竟这可能不是一个糟糕的选择），但对于某些事情我可能真的需要它。

Answer 1

最后我发现这很容易：

首先，获取body元素：

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

然后，假设 trigger 是触发打开对话框的 Event 并且 visible 是保持当前状态的 Dynamic t Bool，我们可以创建一个背景和将其移至 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

reflex-dom 处理模态对话框的正确方法是什么？

What is the proper way in reflex-dom to handle a modal dialog?

haskell

reflex