5

reflex-domライブラリを使い始めたばかりで、ダイアログを操作するための適切で便利な方法がよくわかりません。

ダイアログを表示するということは、通常、いくつかの要素を最後に追加し<body>、ユーザーがボタンや背景をクリックしたり、エスケープなどを押したりしたときにそれを削除することを意味します。ただし、ネストされたウィジェットからこれを行うと、何らかの形でイベント (「ダイアログを表示」) が一番上にバブルアップすることになり、非常に扱いにくい場合があります。他に綺麗にする方法はありますか？markup.rocksを見たところ、JS/jQuery ハックを使用しているようです。

モーダル ダイアログを使用しないことにすることもできますが (結局のところ、それは悪い選択肢ではないかもしれません)、いくつかの場合にはモーダル ダイアログが本当に必要になる場合があります。

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すると、背景を作成して 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
于 2015-11-15T23:37:11.930 に答える