Close a specific modalDialog in R shiny

Question

I have a a scenario in my app that matches the situation in the dummy app below. What my real app does is show checkboxes in a dropdownmenu coming from a dropdownButton for every column available in a dataframe for the user to pick from for a model to run on. What I am trying to build is a modalDialog that is triggered on hover, that shows a plot of the data in that column on which the user hovers. At the moment, I got all of that working, but there is one problem remaining:

If the user closes the modal with the histogram, the dialog window of the dropdownbutton also disappears. How to make only the plot dialog to close, while keeping the one with all the checkboxes open?

here is a dummy app with the problem:

library(shiny)
library(shinyjs)

shinyApp(


  ui = fluidPage(
    useShinyjs(),

        dropdownButton(label = "CLICK",
                       h5("This is the dropdownbutton window" ),
          checkboxInput("Checker", "Hover for modal dialog"),
          icon = icon("tasks"),
          inputId = "MYDDMbut",
          circle = T, 
          status = "info", 
          tooltip = tooltipOptions(title = "Click to open window"), width = "400px")
  ),

    server =  function(input, output, session) {
    output$distPlot <- renderPlot({
        hist(mtcars$disp)
    })


    onevent('mouseover','Checker',{
      delay(1000, 
            showModal(div(id="ModalDiv", modalDialog(
              inputId = "distPlot",
              title = HTML('<span style="color:#339fff; font-size: 20px; font-weight:bold; font-family:sans-serif ">Current data column<span>
                           <button type = "button" class="close" data-dismiss="modal" ">
                           <span style="color:#339fff; ">x <span>
                           </button> '),
              br(),
              plotOutput("distPlot"),
              br(),
              easyClose = TRUE,
              footer = NULL ))))
      print("2")}, T)
  }
    )

Answer 1

I remove the close cross on the modal & add a OK button on the fotter and put an observeEvent on it.

library(shiny)
library(shinyjs)
library(shinyWidgets)

shinyApp(


    ui = fluidPage(
        useShinyjs(),

        dropdownButton(label = "CLICK",
                       h5("This is the dropdownbutton window" ),
                       checkboxInput("Checker", "Hover for modal dialog"),
                       icon = icon("tasks"),
                       inputId = "MYDDMbut",
                       circle = T, 
                       status = "info", 
                       tooltip = tooltipOptions(title = "Click to open window"), width = "400px")
    ),

    server =  function(input, output, session) {
        output$distPlot <- renderPlot({
            hist(mtcars$disp)
        })


        onevent('mouseover','Checker',{
                 showModal(div(id="ModalDiv", modalDialog(
                      inputId = "distPlot",
                      title = HTML('<span style="color:#339fff; font-size: 20px; font-weight:bold; font-family:sans-serif ">Current data column<span>'),
                      br(),
                      plotOutput("distPlot"),
                      footer = tagList(actionButton("close", "OK")) )))
            print("2")}, T)

        observeEvent(input$close, {
            removeModal()
            toggleDropdownButton(inputId = "MYDDMbut")
        })
    }
        )