如何用jQuery UI替代已废弃的showModalDialog？新手技术求助

Hey there! Since you're new to JavaScript and jQuery UI and need to replace the deprecated showModalDialog from your legacy code, let's break down how to replicate all its key features—modal form, parent-child page data transfer, and database-driven search/retrieval—with jQuery UI Dialog.

1. 先搭好基础模态框结构 #

First, make sure you've included jQuery and jQuery UI (both the CSS and JS files) in your page. Then we'll build the dialog and trigger button:

<!-- 父页面的触发按钮 -->
<button id="openSearchDialog">打开数据库检索对话框</button>

<!-- 隐藏的模态框容器（默认不显示，用jQuery UI控制显示） -->
<div id="searchDialog" title="数据库条目检索" style="display: none;">
  <form id="searchForm">
    <div class="form-group">
      <label for="searchKeyword">检索关键词:</label>
      <input type="text" id="searchKeyword" name="keyword" placeholder="输入关键词...">
    </div>
    <button type="button" id="submitSearchBtn">执行检索</button>
    
    <!-- 检索结果展示区域 -->
    <div id="searchResultsContainer" style="margin-top: 20px;"></div>
  </form>
</div>

Initialize the dialog with jQuery UI:

$(document).ready(function() {
  // 初始化对话框
  $("#searchDialog").dialog({
    autoOpen: false, // 默认不打开
    modal: true, // 模态模式，禁止操作父页面
    width: 700,
    resizable: true, // 允许调整对话框大小
    buttons: {
      "确认选择": function() {
        // 这里处理用户确认后的逻辑（比如传值回父页面）
        $(this).dialog("close");
      },
      "取消": function() {
        $(this).dialog("close");
      }
    }
  });

  // 点击按钮打开对话框
  $("#openSearchDialog").on("click", function() {
    $("#searchDialog").dialog("open");
  });
});

2. 实现父子页面（组件）的传值 #

Unlike showModalDialog which had built-in data passing, we'll use clean, maintainable approaches with jQuery:

场景1：对话框内容在父页面内 #

If your form and search logic live directly in the parent page, you can manipulate the DOM directly to pass data. For example, when a user clicks a search result, send the selected value to a parent page input:

// 监听检索结果的点击事件（假设结果是列表项）
$("#searchResultsContainer").on("click", ".search-result-item", function() {
  // 获取选中条目的数据
  var selectedId = $(this).data("item-id");
  var selectedName = $(this).text();

  // 将数据设置到父页面的元素中
  $("#parentPageInput").val(selectedName);
  $("#parentPageHiddenId").val(selectedId);

  // 也可以触发自定义事件通知父页面（更灵活）
  $(document).trigger("itemSelected", { id: selectedId, name: selectedName });
});

// 父页面监听自定义事件（可选）
$(document).on("itemSelected", function(event, data) {
  console.log("选中的条目:", data);
  // 这里可以做更多后续处理
});

场景2：对话框加载外部子页面 #

If your form is in a separate child page (e.g., search-modal.html), load it into the dialog and use DOM data attributes or events to pass data back:

// 修改对话框初始化代码，加载外部页面
$("#searchDialog").dialog({
  autoOpen: false,
  modal: true,
  width: 700,
  open: function() {
    // 加载子页面内容到对话框
    $(this).load("search-modal.html");
  },
  close: function() {
    // 从子页面的隐藏元素中获取选中数据
    var selectedData = $(this).find("#selectedItemData").data("value");
    if (selectedData) {
      $("#parentPageInput").val(selectedData.name);
      $("#parentPageHiddenId").val(selectedData.id);
    }
    // 清空对话框内容，避免下次打开重复加载
    $(this).empty();
  }
});

In your child page (search-modal.html), after selecting an item:

// 子页面的点击事件
$(".search-result-item").on("click", function() {
  var selectedItem = {
    id: $(this).data("item-id"),
    name: $(this).text()
  };
  // 将数据存储到父页面对话框的隐藏元素中
  $("#searchDialog").append('<div id="selectedItemData" data-value=\'' + JSON.stringify(selectedItem) + '\'></div>');
  // 关闭对话框
  $("#searchDialog").dialog("close");
});

3. 数据库数据检索与展示 #

This part uses standard AJAX to fetch data from your backend and render it in the dialog:

// 监听检索按钮点击
$("#submitSearchBtn").on("click", function() {
  var keyword = $("#searchKeyword").val().trim();
  if (!keyword) {
    $("#searchResultsContainer").text("请输入检索关键词");
    return;
  }

  // 发送AJAX请求到后端接口
  $.ajax({
    url: "/api/database-search", // 替换成你的后端接口地址
    method: "GET",
    data: { keyword: keyword },
    dataType: "json",
    success: function(response) {
      $("#searchResultsContainer").empty();
      
      if (response.length === 0) {
        $("#searchResultsContainer").text("未找到匹配的数据库条目");
        return;
      }

      // 渲染检索结果为列表
      var resultList = $("<ul>").addClass("search-results-list");
      response.forEach(function(item) {
        var listItem = $("<li>")
          .addClass("search-result-item")
          .text(item.item_name)
          .data("item-id", item.item_id);
        resultList.append(listItem);
      });
      $("#searchResultsContainer").append(resultList);
    },
    error: function() {
      $("#searchResultsContainer").text("检索失败，请稍后重试");
    }
  });
});

4. 实用小贴士 #

• Style Customization: You can tweak the dialog's appearance by overriding jQuery UI's CSS classes, or adding your own custom classes to the dialog container.
• Version Compatibility: Make sure your jQuery and jQuery UI versions are compatible (e.g., jQuery 3.x works with jQuery UI 1.13.x).
• Avoid Global Variables: Instead of using global variables to pass data, rely on DOM data() attributes or custom events to keep your code clean.
• Accessibility: jQuery UI Dialog is built with accessibility in mind, but you can add ARIA attributes if needed to make it even more accessible.

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