动态高亮Bootstrap模态框中的状态按钮：一种专业的视觉反馈方案

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit Context</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <div class="form-group col-md-4 justify-content-center">
                <label>Name</label>
                <input type="text" id="Name" name="codename" class="form-control" disabled value="">
              </div>  
              <div class="form-group col-md-4 ">
                <label> Display Name</label>
                <input type="text" id="DN" name="displayname" class="form-control">
              </div>
              <div class="form-group col-md-3">
                <label>Status</label>  

                <!-- 目标按钮：Online 按钮 -->
                <input type="button" class="btn btn-outline-success d-block mx-auto my-3" id="Geton"  value="Online">

                <!-- 目标按钮：Offline 按钮 -->
                <input type="button" class="btn btn-outline-danger d-block mx-auto my-3" id="Getoff" value = "Offline">
              </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" id="Save" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

/* 为 Online 按钮定义高亮样式，与 btn-outline-success 颜色匹配 */
.btn-outline-success.btn-active-outline {
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5); /* Bootstrap success color with transparency */
}

/* 为 Offline 按钮定义高亮样式，与 btn-outline-danger 颜色匹配 */
.btn-outline-danger.btn-active-outline {
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5); /* Bootstrap danger color with transparency */
}

/* 确保移除浏览器默认的焦点轮廓，或与 Bootstrap 默认行为保持一致 */
.btn:focus {
    outline: 0; /* 移除浏览器默认的焦点轮廓 */
    /* 如果使用 Bootstrap 5+, 可以使用其 CSS 变量来保持一致性 */
    /* box-shadow: var(--bs-btn-focus-box-shadow); */
}

// 监听模态框的显示事件
$('#exampleModal').on('show.bs.modal', function (event) {
    const modal = $(this);

    // 假设 'currentStatus' 变量从某个数据源获取，代表当前的状态
    // 例如，从触发模态框的按钮的 data 属性、AJAX 请求结果或全局变量中获取。
    // 这里我们模拟一个获取状态的逻辑。
    let currentStatus = 'online'; // 示例：假设从后端获取的当前状态是 'online'

    // 在模态框显示前，先清除所有按钮可能存在的高亮状态，防止旧状态残留
    modal.find('#Geton, #Getoff').removeClass('btn-active-outline');

    // 根据获取到的状态，为对应的按钮添加高亮类
    if (currentStatus === 'online') {
        modal.find('#Geton').addClass('btn-active-outline');
    } else if (currentStatus === 'offline') {
        modal.find('#Getoff').addClass('btn-active-outline');
    }

    // 实际应用中，你可能需要从触发模态框的元素（event.relatedTarget）
    // 或通过 AJAX 请求获取数据来设置 currentStatus。
    // 示例：从触发模态框的按钮获取数据
    // const button = $(event.relatedTarget); // 触发模态框的按钮
    // const statusFromButton = button.data('status'); // 假设按钮有一个 data-status 属性
    // if (statusFromButton) {
    //     currentStatus = statusFromButton;
    // }
});

// 监听模态框的隐藏事件，清除高亮状态，确保下次打开时是干净的状态
$('#exampleModal').on('hidden.bs.modal', function () {
    $(this).find('#Geton, #Getoff').removeClass('btn-active-outline');
});

// 实际的数据传递示例：
// 假设你有一个按钮，点击它会打开模态框并传递状态
// $('#someEditButton').on('click', function() {
//     const itemId = $(this).data('item-id');
//     // 通过 AJAX 获取该 itemId 对应的状态
//     $.get('/api/item/' + itemId, function(data) {
//         // data.status 可以是 'online' 或 'offline'
//         // 将状态存储在模态框的 jQuery data 属性中，以便在 show.bs.modal 事件中获取
//         $('#exampleModal').data('currentStatus', data.status); 
//         $('#exampleModal').modal('show'); // 打开模态框
//     });
// });

// 然后在 show.bs.modal 事件中获取：
// $('#exampleModal').on('show.bs.modal', function (event) {
//     const modal = $(this);
//     let currentStatus = modal.data('currentStatus'); // 从模态框的 data 属性中获取状态
//     // ... 后续根据 currentStatus 应用高亮逻辑 ...
// });