Bootstrap modal with WebSharper.UI.Next

Bootstrap.fs

open WebSharper
open WebSharper.JavaScript
open WebSharper.JQuery
open WebSharper.UI.Next
open WebSharper.UI.Next.Html
open WebSharper.UI.Next.Client

[<JavaScript>]
module Bootstrap =

    type JQuery with
        [<Inline "$0.modal('show')">]
        member this.ModalShow() = this

    module Modal =

        type ModalAction = Title * Action
        and Title = Title of string
        and Action = Action of (unit -> unit)
        
        type OpenModal = unit -> unit

        type ModalOptions = {
            Title: string
            Content: Doc
            PositiveAction: ModalAction
            NegativeAction: ModalAction
        }

        /// Installs the modal facility in the page where it is called.
        /// Returns a function which trigger the opening of the modal.
        let install options : OpenModal =

            let makeButton (Title title, Action action) attrs = 
                Doc.Button title attrs action
            
            let modal =
                divAttr [ attr.``class`` "modal fade"; attr.tabindex "-1" ]
                        [ divAttr [ attr.``class`` "modal-dialog modal-sm" ] 
                                    [ divAttr [ attr.``class`` "modal-content" ] 
                                              [ divAttr [ attr.``class`` "modal-header"] [ h4Attr [ attr.``class`` "modal-title" ] [ text options.Title ] ]
                                                divAttr [ attr.``class`` "modal-body" ]  [ p [ options.Content ] ]
                                                divAttr [ attr.``class`` "modal-footer" ] 
                                                        [ makeButton options.PositiveAction [ attr.``class`` "btn btn-primary" ] 
                                                          makeButton options.NegativeAction [ attr.``class`` "btn bnt-default" ] ] ] ] ]
            modal |> Doc.RunById("main")

            fun () -> JQuery.Of(modal.Dom).ModalShow() |> ignore