如何用CSS实现仿Windows 7风格的模态框最小化、最大化、关闭按钮

Got it! Building Windows 7-style window controls for modals is totally doable with pure HTML, CSS, and a bit of JavaScript. I’ve put together a complete implementation that matches that classic Win7 look and feel, including hover states, interactive functionality, and even optional drag support.

Step 1: HTML Structure #

First, set up the modal with a title bar containing the three control buttons. We’ll use simple text characters for the icons (you can swap these for SVGs if you prefer):

<!-- Modal Container -->
<div class="win7-modal">
  <!-- Title Bar with Controls -->
  <div class="win7-modal-titlebar">
    <span class="modal-title">My Win7-Style Modal</span>
    <div class="win7-window-controls">
      <button class="control-btn minimize-btn" title="Minimize">
        <span class="icon">−</span>
      </button>
      <button class="control-btn maximize-btn" title="Maximize">
        <span class="icon">□</span>
      </button>
      <button class="control-btn close-btn" title="Close">
        <span class="icon">×</span>
      </button>
    </div>
  </div>
  <!-- Modal Content -->
  <div class="win7-modal-content">
    Your modal content goes here!
  </div>
</div>

Step 2: CSS Styling (Win7 Look & Feel) #

This CSS replicates the gradient title bar, button hover states (including the iconic red close button hover), and window borders from Windows 7:

/* Base Modal Styles */
.win7-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  background-color: #fff;
  border: 1px solid #7c7c7c;
  border-radius: 2px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  z-index: 1000;
  font-family: "Segoe UI", Arial, sans-serif;
}

/* Title Bar (Win7 Gradient) */
.win7-modal-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: linear-gradient(to bottom, #f0f0f0 0%, #e5e5e5 100%);
  border-bottom: 1px solid #dcdcdc;
  cursor: move; /* For optional drag functionality */
}

.modal-title {
  font-size: 12px;
  color: #202020;
}

/* Window Controls Container */
.win7-window-controls {
  display: flex;
  gap: 0; /* Win7 buttons sit directly next to each other */
}

/* Base Control Button Styles */
.control-btn {
  width: 25px;
  height: 22px;
  border: none;
  background: transparent;
  font-size: 11px;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-btn:hover {
  background-color: #e0e0e0;
}

.control-btn:active {
  background-color: #c0c0c0;
}

/* Close Button Special Styles (Win7 Red Hover) */
.close-btn:hover {
  background-color: #e81123;
  color: #fff;
}

.close-btn:active {
  background-color: #c40013;
}

/* Modal Content */
.win7-modal-content {
  padding: 16px;
  font-size: 14px;
}

/* Maximized State Styles */
.win7-modal.maximized {
  top: 0;
  left: 0;
  transform: none;
  width: 100vw;
  height: 100vh;
}

.win7-modal.maximized .maximize-btn .icon {
  content: "🗗"; /* Swap to restore icon when maximized */
}

Step 3: JavaScript Functionality #

Add interactivity for minimizing, maximizing/restoring, closing the modal, and optional drag support:

// Get modal elements
const modal = document.querySelector('.win7-modal');
const minimizeBtn = document.querySelector('.minimize-btn');
const maximizeBtn = document.querySelector('.maximize-btn');
const closeBtn = document.querySelector('.close-btn');

// Close button functionality
closeBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});

// Minimize button (hide modal; extend with taskbar logic if needed)
minimizeBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});

// Maximize/Restore functionality
let isMaximized = false;
const originalModalState = {};

maximizeBtn.addEventListener('click', () => {
  if (!isMaximized) {
    // Save original modal position/size
    originalModalState.top = modal.offsetTop + 'px';
    originalModalState.left = modal.offsetLeft + 'px';
    originalModalState.width = modal.offsetWidth + 'px';
    originalModalState.height = modal.offsetHeight + 'px';
    
    // Switch to maximized state
    modal.classList.add('maximized');
    modal.style.top = '0';
    modal.style.left = '0';
    modal.style.width = '100vw';
    modal.style.height = '100vh';
    isMaximized = true;
  } else {
    // Restore original state
    modal.classList.remove('maximized');
    modal.style.top = originalModalState.top;
    modal.style.left = originalModalState.left;
    modal.style.width = originalModalState.width;
    modal.style.height = originalModalState.height;
    isMaximized = false;
  }
});

// Optional: Drag functionality for the modal
let isDragging = false;
let startX, startY, initialX, initialY;

modal.querySelector('.win7-modal-titlebar').addEventListener('mousedown', (e) => {
  if (isMaximized) return; // Don't allow dragging when maximized
  isDragging = true;
  startX = e.clientX;
  startY = e.clientY;
  initialX = modal.offsetLeft;
  initialY = modal.offsetTop;
  
  modal.style.cursor = 'grabbing';
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const dx = e.clientX - startX;
  const dy = e.clientY - startY;
  modal.style.left = `${initialX + dx}px`;
  modal.style.top = `${initialY + dy}px`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
  modal.style.cursor = 'move';
});

How to Use This #

1. Integrate the HTML: Drop the modal structure into your page. Replace the sample content with your own.
2. Add the CSS: Paste the styles into your stylesheet. You can tweak sizes, colors, or fonts to fit your site while keeping the Win7 core aesthetic.
3. Include the JavaScript: Add the script at the end of your <body> tag or in an external JS file to enable all interactive features.
4. Optional Extras:
   • Swap the text icons for custom SVGs for a more polished look.
   • Add a semi-transparent overlay behind the modal to focus user attention (create a div with position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999;).

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