Portal_ModalDialog.scala

import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.prefix_<^._
import org.scalajs.dom._

object Portal {
  def apply(kidz: ReactElement*) = component(Props(kidz))

  case class Props(kidz: Seq[ReactElement])

  private val component = ReactComponentB[Props]("Portal")
    .renderBackend[Backend]
    .componentDidMount(cdm => cdm.backend.init() >> cdm.backend.update())
    .componentDidUpdate(cdu => cdu.$.backend.update())
    .componentWillUnmount(cwu => cwu.backend.remove())
    .build

  class Backend($: BackendScope[Props, Unit]) {
    val nodeWrap: Element = document.createElement("div")

    def render():ReactElement = <.div()
    def init() = Callback ( document.body.appendChild(nodeWrap) )
    def remove() = Callback( document.body.removeChild(nodeWrap) )

    def update() = $.props >>= { p =>
      val aa:ReactElement = p.kidz match {
        case Seq(x) => x
        case _ => <.div(p.kidz)
      }
      ReactDOM.render(aa, nodeWrap)
      Callback.empty
    }
  }
}

object ModalDialog {
  def apply(title: String,  body: Seq[ReactElement], footer: Seq[ReactElement], closeCB: Callback) = component(Props(title, body, footer, closeCB))

  case class Props(title: String,  body: Seq[ReactElement], footer: Seq[ReactElement], closeCB: Callback)

  private val component = ReactComponentB[Props]("ModalDialog")
    .render_P{ p =>
      Portal(
        <.div(^.cls:="container",
          <.div(^.cls:="modal", ^.display.block,
            <.div(^.cls:="modal-dialog",
              <.div(^.cls:="modal-content",
                <.div(^.cls:="modal-header",
                  <.button(^.cls:="close", ^.tpe:="button", ^.onClick-->p.closeCB, <.span(^.dangerouslySetInnerHtml("&times;"))),
                  <.h4(^.cls:="modal-title",p.title)
                ),
                p.body.nonEmpty ?= <.div(^.cls:="modal-body", p.body),
                p.footer.nonEmpty ?= <.div(^.cls:="modal-footer", p.footer)
              )
            )
          )
        ),
        <.div(^.cls:="modal-backdrop in")
      )
    }
    .build
}