如何实现Select2下拉菜单点击后居中显示及背景遮罩效果？

问题修正与方案说明 #

你当前的代码已实现下拉菜单居中，但缺少背景遮罩功能，同时存在资源重复引入、标签属性错误（如link标签的ref应为href）的问题，这些都会导致功能异常。以下是完整的解决方案：

核心实现步骤 #

• 修复资源引入问题：移除重复的jQuery和Select2文件，修正标签属性错误
• 添加全屏半透明遮罩样式，默认隐藏
• 利用Select2的select2:open/select2:close事件控制遮罩的显示与隐藏
• 调整下拉菜单的层级，确保其显示在遮罩上方

完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Select2 自定义下拉</title>
    <!-- Select2 CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
    <!-- 自定义样式 -->
    <style>
        .box {
            position: fixed;
            top: 80%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .select2-selection {
            background-color: aqua !important;
            border-radius: 10px !important;
        }

        .select2-dropdown {
            background-color: red !important;
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            z-index: 10001 !important; /* 确保下拉菜单在遮罩之上 */
            width: 200px !important; /* 与原select宽度保持一致 */
        }

        /* 背景遮罩样式 */
        .select2-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
            z-index: 10000; /* 层级低于下拉菜单 */
            display: none; /* 默认隐藏 */
        }
    </style>
</head>
<body>
    <div class="box">
        <select id="my-select" style="width: 200px">
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
        </select>
    </div>

    <!-- 遮罩层元素 -->
    <div class="select2-overlay"></div>

    <!-- jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <!-- Select2 JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <!-- 自定义脚本 -->
    <script>
        $(document).ready(function(){
            $('#my-select').select2();

            // 下拉打开时显示遮罩
            $('#my-select').on('select2:open', function() {
                $('.select2-overlay').show();
            });

            // 下拉关闭时隐藏遮罩
            $('#my-select').on('select2:close', function() {
                $('.select2-overlay').hide();
            });

            // 点击遮罩层关闭下拉菜单
            $('.select2-overlay').on('click', function() {
                $('#my-select').select2('close');
            });
        });
    </script>
</body>
</html>

关键细节说明 #

1. 遮罩层控制：通过.select2-overlay类创建全屏遮罩，借助Select2的select2:open和select2:close事件同步显示状态
2. 层级管理：设置下拉菜单的z-index高于遮罩，避免被遮挡
3. 用户体验优化：添加遮罩点击事件，点击遮罩可直接关闭下拉菜单
4. 资源修复：移除重复引入的文件，修正标签属性错误，避免加载冲突

内容的提问来源于stack exchange，提问作者Steve