要解决这个问题，可以使用jQuery的Ajax方法来调用页面，并在成功回调中打开模态窗口。以下是一个基本的示例代码：

HTML部分:

点击调用页面



  

    ×
    
    

  

CSS部分:

/* 模态窗口的样式 */
.modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

JavaScript部分:

// 监听按钮点击事件
$('#ajaxBtn').click(function() {
  // 发送Ajax请求
  $.ajax({
    url: 'your-page-url', // 替换成你的页面URL
    method: 'POST', // 根据需求使用GET或POST方法
    data: { // 表单变量
      variable1: 'value1',
      variable2: 'value2',
      // 添加更多变量...
    },
    success: function(response) {
      // 打开模态窗口
      $('#myModal').show();
      // 在模态窗口中显示内容
      $('#modalContent').html(response);
    }
  });
});

// 监听模态窗口关闭按钮点击事件
$('.close').click(function() {
  // 关闭模态窗口
  $('#myModal').hide();
});

在上面的代码中，首先定义了一个按钮和一个模态窗口的基本HTML结构。然后使用CSS样式来定义模态窗口的外观。接下来，使用jQuery的Ajax方法来发送请求，并在成功回调中打开模态窗口，并将返回的内容显示在模态窗口中。最后，监听模态窗口关闭按钮的点击事件，以关闭模态窗口。

请注意，你需要将示例代码中的"your-page-url"替换为你要调用的页面的URL，并根据需要添加更多的表单变量。此外，你还可以根据自己的需求来自定义模态窗口的样式和行为。