5

我刚从reflex-dom库开始，我还不能完全弄清楚使用对话框的正确和方便的方法。

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

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

4

1 回答 1

4

最终我发现这很容易：

首先，获取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
于 2015-11-15T23:37:11.930 回答