如何实现shinyWidgets::dropdown()仅通过内部按钮关闭并添加模态框式遮罩层

我来帮你搞定这个需求！要让shinyWidgets::dropdown()只能通过内部按钮关闭，同时添加类似模态框的全屏遮罩层，我们需要结合JavaScript事件控制和自定义CSS样式来实现，下面是具体的解决方案：

核心思路拆解 #

1. 阻止默认关闭行为：拦截dropdown的默认关闭事件（比如点击外部、再次点击触发按钮），确保只有我们指定的按钮能关闭它
2. 添加并控制遮罩层：创建一个全屏半透明遮罩元素，和dropdown的显示/隐藏状态联动，达到类似模态框的视觉效果

完整实现代码 #

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      /* 自定义遮罩层样式，默认隐藏 */
      .dropdown-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999; /* 确保在dropdown下方，dropdown的z-index默认是1000 */
        display: none;
      }
    ")),
    tags$script(HTML("
      $(document).ready(function() {
        // 创建遮罩层元素并添加到页面
        $('body').append('<div class=\"dropdown-overlay\"></div>');
        const overlay = $('.dropdown-overlay');
        
        // 阻止dropdown的默认关闭行为
        $('.dropdown').on('hide.bs.dropdown', function(e) {
          // 只有当点击关闭按钮时才允许关闭，否则阻止默认事件
          if (!$(e.target).is('#closeDropdownBtn')) {
            e.preventDefault();
            e.stopPropagation();
            return false;
          }
        });
        
        // 监听dropdown显示事件，同步显示遮罩层
        $('.dropdown').on('show.bs.dropdown', function() {
          overlay.show();
        });
        
        // 关闭按钮点击事件：手动关闭dropdown并隐藏遮罩层
        $('#closeDropdownBtn').click(function() {
          $('.dropdown').removeClass('show');
          $('.dropdown-toggle').attr('aria-expanded', 'false');
          overlay.hide();
        });
      });
    "))
  ),
  
  dropdown(
    "你的内容放在这里！可以添加多个元素",
    circle = TRUE, 
    status = "danger", 
    icon = icon("gear"), 
    width = "300px",
    animate = animateOptions(enter = "fadeInDown", exit = "fadeOutUp", duration = 1),
    actionButton("closeDropdownBtn", "关闭Dropdown")
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

关键代码说明 #

• 遮罩层样式：通过CSS定义了一个全屏半透明的遮罩，默认隐藏，z-index设置为999（低于dropdown的默认层级1000，确保dropdown在遮罩上方）
• 阻止默认关闭：在hide.bs.dropdown事件中，判断触发源不是关闭按钮时，就阻止默认的关闭行为，避免点击外部或触发按钮时自动关闭
• 状态联动：监听dropdown的show.bs.dropdown事件，显示遮罩层；点击关闭按钮时，手动移除dropdown的show类、更新按钮的aria-expanded属性（保持无障碍属性正确），同时隐藏遮罩层

这样就能完美实现你想要的效果：只有点击内部的“关闭Dropdown”按钮才能关闭下拉框，同时下拉框显示时会出现全屏遮罩，和模态框的体验一致~

备注：内容来源于stack exchange，提问作者neves