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

Question

I am just starting with the reflex-dom library and I cannot quite figure out the proper and convenient way to work with dialogs. 我刚刚开始使用reflex-dom库，我无法找到使用对话框的正确方便的方法。

Showing a dialog generally means adding a few elements to the end of <body> and removing it when the user clicks on some button, backdrop or presses eg escape. 显示对话框通常意味着在<body>的末尾添加一些元素，并在用户点击某个按钮，背景或按下例如escape时将其删除。 However doing this from some nested widget means somehow bubbling up the event ('show the dialog') to the top, which could be quite clumsy. 但是，从某些嵌套小部件执行此操作意味着以某种方式将事件（“显示对话框”）冒泡到顶部，这可能非常笨拙。 Is there any other way to do it nicely? 有没有其他方法可以很好地做到这一点？ I just had a look at markup.rocks and that seems to use some JS/jQuery hacks. 我刚看了一下markup.rocks ，似乎使用了一些JS / jQuery黑客。

I can decide not to use modal dialogs (it may not be a bad option after all), but for some things I may really need it. 我可以决定不使用模态对话框（毕竟它可能不是一个糟糕的选择），但对于某些事情，我可能真的需要它。

Answer 1

Ultimately I found it quite easy: 最终我觉得很容易：

First, get the body element: 首先，获取body元素：

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

Then, assuming trigger is the Event that triggers opening the dialog and visible is a Dynamic t Bool that holds the current state, we can create a backdrop and move it to the back of 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 个解决方案

解决方案1
3 已采纳 2015-11-15 23:37:11

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-11-15 23:37:11

解决方案1
3 已采纳 2015-11-15 23:37:11