Shiny Overlay Page

shiny_overlay.R

# Adaption of w3schools overlay page
# https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_overlay_text

library(shiny)
library(shinyjs)

# Overlay js function
jsCode <- "

shinyjs.overlay_on = function() {
  document.getElementById('overlay').style.display = 'block';
}

function off() {
  document.getElementById('overlay').style.display = 'none';
}

"


shinyApp(ui = fluidPage(
  
  useShinyjs(),
  extendShinyjs(text = jsCode),
  
  # overlay html
  tagList(div(id = "overlay", 
              onclick = "off()",
            div(id = "text", "Overlay Text")
             )
          ),
  
  # overlay css
  tags$head(
    tags$style(HTML("
#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
}

#text{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
    "))
  ),
  
    actionButton(inputId = "show",
                 label = "Show overlay")
  
),

  server = function(input, output) {
    
    observeEvent(input$show,{
      
      js$overlay_on() 
      
    })
    
  }
  
)