在Bootstrap模态框中根据状态自动高亮按钮：实现动态视觉指示

/* 自定义高亮样式 */

/* 针对“在线”按钮的成功高亮效果 */
.btn-status-active-success {
    /* 模仿 Bootstrap 成功按钮的焦点阴影 */
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5);
}

/* 针对“离线”按钮的危险高亮效果 */
.btn-status-active-danger {
    /* 模仿 Bootstrap 危险按钮的焦点阴影 */
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
}

<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>  
                <!-- 注意这里的ID：Geton 和 Getoff -->
                <input type="button" class="btn btn-outline-success d-block mx-auto my-3" id="Geton"  value="Online"   >
                <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>

// 当模态框完全显示后触发
$('#exampleModal').on('shown.bs.modal', function (e) {
    // ---------------------------------------------------------------
    // 步骤1: 获取当前实体状态
    // 假设 'entityStatus' 是一个变量，它存储了从后端或其他数据源获取的当前状态。
    // 在实际应用中，您可以通过以下方式获取：
    // 1. AJAX 请求：在模态框打开前或打开时发起请求获取数据。
    // 2. data 属性：如果模态框由另一个按钮触发，可以将状态存储在该按钮的 data-status 属性中。
    // 3. 全局变量或隐藏字段：页面加载时已存在的数据。
    //
    // 这里我们使用一个示例值 'online'。请根据您的实际数据源进行替换。
    var entityStatus = 'online'; // 示例值，实际应从数据源获取，例如：
                                 // var entityStatus = $(e.relatedTarget).data('status'); // 如果从触发按钮获取
                                 // 或通过 AJAX 获取后赋值给此变量
    // ---------------------------------------------------------------

    // 获取模态框内的按钮元素
    var $getOnlineBtn = $(this).find('#Geton');
    var $getOfflineBtn = $(this).find('#Getoff');

    // 步骤2: 首先移除所有可能的高亮样式，确保状态切换的正确性
    // 避免旧状态的高亮残留
    $getOnlineBtn.removeClass('btn-status-active-success');
    $getOfflineBtn.removeClass('btn-status-active-danger');

    // 步骤3: 根据实体状态应用高亮样式
    if (entityStatus === 'online') {
        $getOnlineBtn.addClass('btn-status-active-success');
    } else if (entityStatus === 'offline') {
        $getOfflineBtn.addClass('btn-status-active-danger');
    }
});

// ---------------------------------------------------------------
// 额外功能: 绑定按钮点击事件，以便用户手动切换状态时也能更新高亮
// ---------------------------------------------------------------

// 监听模态框内部的“在线”按钮点击事件
$('#exampleModal').on('click', '#Geton', function() {
    var $getOnlineBtn = $(this);
    var $getOfflineBtn = $('#exampleModal').find('#Getoff');

    // 移除“离线”按钮的高亮，并为“在线”按钮添加高亮
    $getOfflineBtn.removeClass('btn-status-active-danger');
    $getOnlineBtn.addClass('btn-status-active-success');

    // 在这里添加逻辑来更新后端状态（例如，通过 AJAX 请求）
    console.log('Status set to Online');
    // 假设您有一个函数来更新后端状态，例如 updateEntityStatus('online');
});

// 监听模态框内部的“离线”按钮点击事件
$('#exampleModal').on('click', '#Getoff', function() {
    var $getOfflineBtn = $(this);
    var $getOnlineBtn = $('#exampleModal').find('#Geton');

    // 移除“在线”按钮的高亮，并为“离线”按钮添加高亮
    $getOnlineBtn.removeClass('btn-status-active-success');
    $getOfflineBtn.addClass('btn-status-active-danger');

    // 在这里添加逻辑来更新后端状态（例如，通过 AJAX 请求）
    console.log('Status set to Offline');
    // 假设您有一个函数来更新后端状态，例如 updateEntityStatus('offline');
});