求助：基于jQuery UI及扩展Dialog实现类Windows全屏对话框功能

Hey there! Since you're new to jQuery and jQuery UI, let's break this down into simple, actionable steps to build that Windows-style dialog with full-screen maximize, minimize, drag, and resize features. I'll walk you through every part so you can follow along easily.

First, create the dialog container in your HTML:

<div id="custom-dialog" title="Windows-Style Dialog">
  <p>This is your custom dialog with all the controls you need!</p>
</div>

We'll add styles to make the maximize/minimize buttons look and behave like Windows' controls:

/* Custom titlebar buttons */
.ui-dialog-titlebar-maximize,
.ui-dialog-titlebar-minimize {
  float: right;
  margin: 0.3em 0.2em;
  padding: 0;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
}

.ui-dialog-titlebar-maximize::after { content: "□"; }
.ui-dialog-titlebar-minimize::after { content: "_"; }

/* Style for minimized dialog */
.dialog-minimized {
  position: fixed !important;
  bottom: 10px;
  right: 10px;
  width: 200px !important;
  height: 40px !important;
  overflow: hidden;
}

.dialog-minimized .ui-dialog-content { display: none; }

This is the core code that adds all the features you need. We'll use jQuery UI's built-in drag/resize, plus custom logic for maximize/minimize:

$(document).ready(function() {
  // Store original dialog state to restore later
  let originalState = {};
  let isMaximized = false;
  let isMinimized = false;

  $("#custom-dialog").dialog({
    draggable: true, // Enable built-in dragging
    resizable: true, // Enable built-in resizing
    autoOpen: true,
    width: 600,
    height: 400,
    titlebar: "custom",
    create: function(event, ui) {
      // Add maximize button to titlebar
      $("<button>")
        .addClass("ui-dialog-titlebar-maximize ui-corner-all")
        .attr("title", "Maximize")
        .appendTo($(this).parent().find(".ui-dialog-titlebar"));

      // Add minimize button to titlebar
      $("<button>")
        .addClass("ui-dialog-titlebar-minimize ui-corner-all")
        .attr("title", "Minimize")
        .appendTo($(this).parent().find(".ui-dialog-titlebar"));

      // Save initial state when dialog is created
      originalState = {
        width: $(this).dialog("option", "width"),
        height: $(this).dialog("option", "height"),
        position: $(this).dialog("option", "position")
      };
    },
    open: function() {
      // Handle maximize/restore click
      $(".ui-dialog-titlebar-maximize").on("click", function() {
        const $dialog = $(this).closest(".ui-dialog");
        if (!isMaximized) {
          // Save current state before going full-screen
          originalState = {
            width: $dialog.width(),
            height: $dialog.height(),
            position: [$dialog.position().left, $dialog.position().top]
          };

          // Set dialog to full screen
          $dialog.css({
            width: $(window).width(),
            height: $(window).height(),
            top: 0,
            left: 0,
            margin: 0
          });
          $("#custom-dialog").dialog("option", {
            width: $(window).width(),
            height: $(window).height()
          });
          isMaximized = true;
          $(this).attr("title", "Restore").html("▢");
        } else {
          // Restore original size and position
          $dialog.css({
            width: originalState.width,
            height: originalState.height,
            left: originalState.position[0],
            top: originalState.position[1],
            margin: "auto"
          });
          $("#custom-dialog").dialog("option", {
            width: originalState.width,
            height: originalState.height
          });
          isMaximized = false;
          $(this).attr("title", "Maximize").html("□");
        }
      });

      // Handle minimize/restore click
      $(".ui-dialog-titlebar-minimize").on("click", function() {
        const $dialog = $(this).closest(".ui-dialog");
        if (!isMinimized) {
          // Save current state before minimizing
          originalState = {
            width: $dialog.width(),
            height: $dialog.height(),
            position: [$dialog.position().left, $dialog.position().top]
          };

          // Shrink dialog to bottom-right corner
          $dialog.addClass("dialog-minimized");
          isMinimized = true;
        } else {
          // Restore original state
          $dialog.removeClass("dialog-minimized").css({
            width: originalState.width,
            height: originalState.height,
            left: originalState.position[0],
            top: originalState.position[1],
            margin: "auto"
          });
          $("#custom-dialog").dialog("option", {
            width: originalState.width,
            height: originalState.height
          });
          isMinimized = false;
        }
      });
    },
    // Keep dialog full-screen when window resizes
    resize: function() {
      if (isMaximized) {
        $(this).closest(".ui-dialog").css({
          width: $(window).width(),
          height: $(window).height()
        });
      }
    }
  });
});

• Drag & Resize: We enabled jQuery UI's built-in draggable and resizable options—no extra code needed for these!
• Full-Screen Maximize: When you click the maximize button, we save the dialog's original size/position, then stretch it to match the window's dimensions. Clicking again restores it.
• Minimize: The dialog shrinks to the bottom-right corner and hides its content. Clicking the minimize button again brings it back to normal.
• Responsive Behavior: If the window is resized while the dialog is maximized, it automatically adjusts to fill the new window size.

• Make sure you've included the latest jQuery and jQuery UI CSS/JS files in your project (either via local files or CDN links).
• You can tweak the initial dialog size, button icons, or minimized position by adjusting the CSS and JS values to match your preferences.

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