AngularJS实现模态框最小化/最大化功能（仿浏览器窗口效果）

嘿，我来帮你搞定这个仿浏览器风格的模态框最小化/最大化功能！咱们一步步改造现有代码，让它完全符合你的需求👇

一、更新HTML结构，添加控制按钮和最小化容器 #

首先给模态框头部加上最小化（-）和最大化（+）按钮，再在页面底部加一个容器用来放最小化后的模态框缩略：

<button id="phq_btn" ng-click="openModalBtn('phq_modal','modal-overlay')">PHQ Open Modal</button>

<div id="modal-overlay"></div>

<!--PHQ Modal-->
<div id="phq_modal" class="modal">
  <!-- PHQ Modal content -->
  <div class="modal-content">
    <!--Allow Scroll-->
    <div class="modal-scroll">
      <!--Allow Dragging of Header-->
      <div class="modal-header">
        <div layout="row" class="titleHolder" style="height: 25px; width: 100%" >
          <div layout="column" flex="33">PHQ-9</div>
          <div layout="column" style="color: rgb(255, 255, 255)" layout-align="end end" flex="100">
            <!-- 最小化按钮 -->
            <span ng-click="minimizeModal('phq_modal')" style="margin-bottom:7px; margin-right:10px" class="minimize">-</span>
            <!-- 最大化按钮 -->
            <span ng-click="maximizeModal('phq_modal')" style="margin-bottom:7px; margin-right:10px" class="maximize">+</span>
            <!-- 关闭按钮 -->
            <span ng-click="closeModalBtn('phq_modal','modal-overlay')" style="margin-bottom:7px" class="close">&times;</span>
          </div>
        </div>
      </div>
      CONTENT GOES HERE.
    </div>
  </div>
</div>

<!-- 最小化模态框存放容器 -->
<div id="minimized-modals" class="minimized-modals"></div>

二、调整CSS样式，适配各种状态 #

新增最小化容器、缩略框，以及模态框最大化/最小化状态的样式：

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
}

/* Modal Content/Box */
.modal-content {
  padding: 10px;
  background-color: #fefefe;
  margin: 5% auto; /* 15% from the top and centered */
  border: 1px solid #888;
  border-radius: 10px;
  height: 70%;
  width: 80%; /* Could be more or less, depending on screen size */
  pointer-events:all;
  z-index: 999;
  transition: all 0.2s ease;
}

/* Modal Scroll Content*/
.modal-scroll {
  overflow-y: scroll !important;
  background-color: #fefefe;
  height: 100%;
  width: 100%;
  pointer-events:all;
}

.modal-header{
  cursor: pointer;
  background-color: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 8px 8px 0 0;
}

/* The Close Button */
.close, .minimize, .maximize {
  color: #f7f3f3;
  float: right;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  height: 15px;
  width: 20px;
  text-align: center;
  pointer-events:all;
}

.close:hover, .minimize:hover, .maximize:hover {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.modal-overlay-on {
  z-index: 1000;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 200ms;
  opacity: 1;
  pointer-events: none;
  cursor: default;
}

/* --- 新增最小化相关样式 --- */
/* 底部最小化容器 */
.minimized-modals {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45px;
  background-color: #2d2d2d;
  display: flex;
  align-items: center;
  padding: 0 15px;
  gap: 12px;
  z-index: 998;
}

/* 最小化后的缩略框 */
.minimized-modal-thumb {
  background-color: #fefefe;
  padding: 6px 18px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.minimized-modal-thumb .restore-btn {
  font-weight: bold;
  color: #333;
}

/* 模态框最小化状态 */
.modal.minimized {
  display: none !important;
}

/* 模态框最大化状态 */
.modal.maximized .modal-content {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

三、完善JavaScript交互逻辑 #

添加最小化、恢复、最大化的函数，同时优化原有功能，确保状态切换流畅：

//Open Modal
$scope.openModalBtn = function(modalId, overlayId){
  const modal = document.getElementById(modalId);
  modal.style.display = "block";
  // 重置状态
  modal.classList.remove('minimized', 'maximized');
  // 启用拖拽
  $(`#${modalId}`).draggable('enable');
  $(`#${overlayId}`).addClass('modal-overlay-on');
};

//Close Modal
$scope.closeModalBtn = function(modalId, overlayId){
  const modal = document.getElementById(modalId);
  modal.style.display = "none";
  modal.classList.remove('minimized', 'maximized');
  $(`#${overlayId}`).removeClass('modal-overlay-on');
  
  // 删除对应的最小化缩略
  const thumb = document.querySelector(`.minimized-modal-thumb[data-modal-id="${modalId}"]`);
  if (thumb) thumb.remove();
};

// 最小化模态框
$scope.minimizeModal = function(modalId) {
  const modal = document.getElementById(modalId);
  const modalTitle = modal.querySelector('.titleHolder div:first-child').textContent.trim();
  
  // 切换状态
  modal.classList.add('minimized');
  modal.classList.remove('maximized');
  // 隐藏遮罩
  document.getElementById('modal-overlay').classList.remove('modal-overlay-on');
  
  // 创建最小化缩略
  const thumb = document.createElement('div');
  thumb.className = 'minimized-modal-thumb';
  thumb.dataset.modalId = modalId;
  thumb.innerHTML = `<span>${modalTitle}</span><span class="restore-btn">+</span>`;
  
  // 绑定恢复事件
  thumb.addEventListener('click', () => {
    $scope.restoreModal(modalId);
    $scope.$apply(); // 通知Angular更新视图
  });
  
  // 添加到底部容器
  document.getElementById('minimized-modals').appendChild(thumb);
};

// 恢复模态框
$scope.restoreModal = function(modalId) {
  const modal = document.getElementById(modalId);
  const thumb = document.querySelector(`.minimized-modal-thumb[data-modal-id="${modalId}"]`);
  
  // 恢复显示
  modal.classList.remove('minimized');
  modal.style.display = 'block';
  document.getElementById('modal-overlay').classList.add('modal-overlay-on');
  
  // 删除缩略
  if (thumb) thumb.remove();
};

// 最大化/还原模态框
$scope.maximizeModal = function(modalId) {
  const modal = document.getElementById(modalId);
  modal.classList.toggle('maximized');
  
  // 最大化时禁用拖拽，还原时启用
  const draggable = $(`#${modalId}`);
  if (modal.classList.contains('maximized')) {
    draggable.draggable('disable');
  } else {
    draggable.draggable('enable');
  }
};

//Drag Modal
$(".modal").draggable({
  handle: ".modal-header"
});

//Disable Click outside of Modal
window.onclick = function(event) {
  if (event.target === document.getElementById('phq_modal')) {
    document.getElementById('phq_modal').style.display = "none";
    document.getElementById('modal-overlay').classList.remove('modal-overlay-on');
  }
};

功能说明 #

• 点击模态框头部的-：模态框隐藏，底部出现对应缩略框，点击缩略框的+就能恢复
• 点击模态框头部的+：模态框切换全屏/正常大小，全屏时无法拖拽
• 关闭模态框时会自动清除底部的缩略框
• 保持了原有的拖拽和点击外部关闭功能

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