Question

我刚开始使用reflex-dom库，我无法找到使用对话框的正确方便的方法。

显示对话框通常意味着在<body>的末尾添加一些元素，并在用户点击某个按钮，背景或按下时将其删除，例如逃逸。但是，从某些嵌套小部件执行此操作意味着以某种方式将事件（“显示对话框”）冒泡到顶部，这可能非常笨拙。有没有其他方法可以很好地做到这一点？我刚看了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，我们可以创建背景并移动它在身体的后面：

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处理模态对话框的正确方法是什么？

1 个答案: