Modal (bonsai_web_components.bonsai_web_components.byo_toplayer.Byo

val create : 
  ?attrs:Bonsai_web.Vdom.Attr.t list Bonsai_web.Bonsai.t ->
  ?close_on_click_outside:Close_on_click_outside.t Bonsai_web.Bonsai.t ->
  ?close_on_right_click_outside:Close_on_click_outside.t Bonsai_web.Bonsai.t ->
  ?close_on_esc:bool Bonsai_web.Bonsai.t ->
  ?lock_body_scroll:bool Bonsai_web.Bonsai.t ->
  ?overflow_auto_wrapper:bool Bonsai_web.Bonsai.t ->
  ?focus_on_open:bool Bonsai_web.Bonsai.t ->
  ?restore_focus_on_close:Restore_focus_on_close.t Bonsai_web.Bonsai.t ->
  content:
    (close:unit Bonsai_web.Effect.t Bonsai_web.Bonsai.t ->
      Bonsai_web.Bonsai.graph @ local ->
      Bonsai_web.Vdom.Node.t Bonsai_web.Bonsai.t) ->
  Bonsai_web.Bonsai.graph @ local ->
  Controls.t

Modals are like popovers, but when one is open, everything under the modal is inert: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert

If multiple modals are open at the same time, only the topmost one will not be inert.

Inert elements will not be closed when clicking outside them, or on escape.

Unlike popovers, close_on_click_outside defaults to Yes_unless_target_is_popover, because if a popover appears outside of a modal, it should likely be interactible without closing the modal.

Also unlike popovers, focus_on_open defaults to true.

If lock_body_scroll is set to true (default false), scrolling the page behind the modal will not be possible.

If overflow_auto_wrapper (default: false), the popover's contents will be wrapped in a div with overflow: auto.

You can style the modal backdrop by targetting the ::backdrop pseudo-element via attrs.

val always_open : 
  ?attrs:Bonsai_web.Vdom.Attr.t list Bonsai_web.Bonsai.t ->
  ?autoclose:Autoclose.t Bonsai_web.Bonsai.t ->
  ?lock_body_scroll:bool Bonsai_web.Bonsai.t ->
  ?overflow_auto_wrapper:bool Bonsai_web.Bonsai.t ->
  ?focus_on_open:bool Bonsai_web.Bonsai.t ->
  ?restore_focus_on_close:Restore_focus_on_close.t Bonsai_web.Bonsai.t ->
  content:
    (Bonsai_web.Bonsai.graph @ local ->
      Bonsai_web.Vdom.Node.t Bonsai_web.Bonsai.t) ->
  Bonsai_web.Bonsai.graph @ local ->
  unit

Like Modal.create, but always open when active. Use by computing / storing your own open state, and match%subing on it. For example:

  let (_ : unit Bonsai.t) =
    match%sub is_open with
      | Some input ->
        Modal.always_open
          ~content:(fun graph -> ...)
          graph;
        return ()
      | None -> return ()
  in
  ...

Typically, you'll calculate is_open as a function of some other state you own.

They will be stacked in the order opened, so the popover whose is_open input last became true will appear on top.