模态框切换按钮的明暗颜色切换实现问题

问题需求 #

我有两个下拉式模态框，希望激活对应的切换按钮颜色发生变化：

• 初始状态：按钮在粉色背景上显示为白色
• 激活状态：模态框弹出后，对应按钮文字变为黑色
• 拒绝使用mix-blend-mode:difference，只需要固定的「初始白、激活黑」颜色切换效果

原始代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="toggle" data-modal-id="lefty" id="lefty">LEFT</button>
<button class="toggle" data-modal-id="righty" id="righty">RIGHT</button>

<div class="modal" data-modal-id="lefty">
  <div class="modal-overlay toggle"></div>
  <div class="modal-wrapper modal-transition">
    <div class="modal-header">
      <button class="modal-close toggle"></button>
      <h2 class="modal-heading">This is a modal on the left</h2>
    </div>
    <div class="modal-body">
      <div class="modal-content">
      </div>
    </div>
  </div>
</div>

<div class="modal" data-modal-id="righty">
  <div class="modal-overlay toggle"></div>
  <div class="modal-wrapper modal-transition">
    <div class="modal-header">
      <h2 class="modal-heading">This is a modal on the right</h2>
    </div>
    <div class="modal-body">
      <div class="modal-content">
      </div>
    </div>
  </div>
</div>

CSS #

.modal {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.modal.modal-visible {
  visibility: visible;
}

.modal-overlay {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: #fff;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s height 0.5s;
  box-sizing: border-box;
}

.modal.modal-visible .modal-overlay {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.modal-wrapper {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-left: 0;
  background-color: #fff;
  box-sizing: border-box;
}

.modal-transition {
  transition: all 0.5s;
  transform: translateY(-100%);
  opacity: 1;
}

.modal.modal-visible .modal-transition {
  transform: translateY(0);
  opacity: 1;
}

.modal-header,
.modal-content {
  padding: 1em;
}

.modal-header {
  position: relative;
  top: 10%;
  background-color: #fff;
}

.modal-close {
  position: fixed;
  top: 0;
  right: 0;
  padding: 1em;
  color: #aaa;
  background: none;
  border: 0;
  font-size: 18px;
}

.modal-close:hover {
  color: #777;
}

.modal-heading {
  font-size: 1.125em;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.modal-content>*:first-child {
  margin-top: 0;
}

.modal-content>*:last-child {
  margin-bottom: 0;
}

.modal.modal-scroll .modal-content {
  max-height: 100%;
  overflow-y: scroll;
}

.modal.modal-scroll .modal-wrapper {
  position: absolute;
  z-index: 9999;
  top: 2em;
  left: 50%;
  width: 32em;
  margin-left: -16em;
  background-color: #CDf;
  box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
  box-sizing: border-box;
}

button {
  background: transparent;
  font-family: 'Republique', sans-serif;
  font-variant: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 0.5;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  letter-spacing: .4px;
  color: #000;
  cursor: pointer;
  outline: 0;
  border: 0;
  padding: 4px;
}

#righty {
  position: fixed;
  right: 10px;
  top: 10px;
  z-index: 100000;
}

#lefty {
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 100000;
}

body {
  background: pink;
}

button {
  color: white;
}

button:hover {
  color: #ccc;
}

JavaScript #

// common close button
$('.toggle').click(function() {
  $(this).closest(".modal").toggleClass('modal-visible');
});

// explicit button per modal
$('.toggle').on('click', function(e) {
  var modalid = $(this).data("modal-id");
  $(`.modal[data-modal-id='${modalid}']`).toggleClass('modal-visible');
});

简洁解决方案 #

仅需两步修改即可实现需求：

1. 添加CSS激活状态规则 #

在现有CSS末尾新增按钮激活状态的颜色定义：

/* 按钮激活状态颜色 */
.toggle.active {
  color: #000;
}

2. 修改JavaScript逻辑 #

更新JS代码，同步切换模态框与对应触发按钮的状态，同时处理互斥逻辑：

// 存储当前激活的按钮，避免重复操作
let activeBtn = null;

// 统一处理模态框开关逻辑
$('.toggle').on('click', function(e) {
  const $this = $(this);
  const modalid = $this.data("modal-id");
  const $modal = modalid ? $(`.modal[data-modal-id='${modalid}']`) : $this.closest(".modal");
  
  // 处理触发按钮的状态切换
  if (modalid) {
    const isModalVisible = $modal.hasClass('modal-visible');
    // 移除其他已激活按钮的状态
    if (activeBtn && activeBtn[0] !== $this[0]) {
      activeBtn.removeClass('active');
    }
    // 切换当前按钮的激活状态
    $this.toggleClass('active', !isModalVisible);
    activeBtn = !isModalVisible ? $this : null;
  } else {
    // 处理关闭按钮/遮罩：找到对应触发按钮并移除激活状态
    const targetModalId = $modal.data("modal-id");
    const $triggerBtn = $(`.toggle[data-modal-id='${targetModalId}']`);
    $triggerBtn.removeClass('active');
    activeBtn = null;
  }
  
  // 切换模态框显示状态
  $modal.toggleClass('modal-visible');
});

效果说明 #

• 点击LEFT/RIGHT按钮，模态框弹出的同时，按钮文字自动变为黑色
• 点击模态框遮罩或关闭按钮，模态框收起，按钮恢复白色
• 互斥处理：打开新模态框时，之前激活的按钮会自动恢复初始状态

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