点击新增交易按钮后Popup Dialog无详情显示问题求助

数据老陈

2026-7-4

问题描述

点击「新增交易」按钮时，仅能弹出弹窗对话框（Popup Dialog），但无法显示详情内容。已完全按照教程步骤操作，问题仍未解决，弹窗无内容显示。

相关代码如下：
Site.js

showInPopup = (url, title) => {
    $.ajax({
        type:"GET",
        url: url,
        success: function (res) {
            $("#form-modal.modal-body").html(res);
            $("#form-modal.modal-title").html(title);
            $("#form-modal").modal('show');
        }
    })
}

排查解决思路

修正选择器写法：当前代码里的$("#form-modal.modal-body")是把ID和类名当成同一元素的选择器，而正常模态框结构中，.modal-body是#form-modal的后代元素，正确写法应该是$("#form-modal .modal-body")（ID和类之间加空格），同理.modal-title的选择器要改成$("#form-modal .modal-title")，这是最可能导致内容不显示的原因。
检查AJAX请求响应：打开浏览器F12开发者工具，切换到「网络」标签，点击新增按钮后查看对应GET请求的响应内容。如果响应为空或返回错误，需排查后端接口是否正常返回所需的HTML内容。

确认模态框DOM结构：确保页面中存在id="form-modal"的模态框，且内部包含.modal-body和.modal-title元素，结构示例如下：

<div class="modal fade" id="form-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body"></div>
    </div>
  </div>
</div>