能否用jQuery实现带按钮的提示框，点击指定按钮加载外部内容？

这个需求完全没问题，属于很典型的前端交互场景，下面给你一个完整的实现示例，你可以直接参考修改：

1. 先搭好HTML结构 #

我们需要一个提示框容器，里面放提示文本和两个按钮（加载内容/取消），另外准备一个用来展示加载内容的区域：

<!-- 提示框 -->
<div id="confirmModal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background: white; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.2);">
  <p>是否要加载外部内容？</p>
  <button id="loadContentBtn">加载内容</button>
  <button id="cancelBtn">取消</button>
</div>

<!-- 内容展示区域 -->
<div id="contentDisplay"></div>

2. 编写jQuery交互逻辑 #

接下来用jQuery监听按钮点击事件，点击“加载内容”时发起请求获取外部内容，点击“取消”则隐藏提示框：

$(document).ready(function() {
  // 先假设我们要触发提示框（比如页面加载后或者某个按钮点击后）
  $("#confirmModal").show();

  // 加载内容按钮点击事件
  $("#loadContentBtn").click(function() {
    // 使用jQuery的load方法加载外部内容（替换成你的目标URL）
    $("#contentDisplay").load("your-external-content.html", function(response, status, xhr) {
      if (status == "error") {
        $("#contentDisplay").html("加载内容失败，请稍后重试");
      }
    });
    // 加载完成后隐藏提示框
    $("#confirmModal").hide();
  });

  // 取消按钮点击事件
  $("#cancelBtn").click(function() {
    // 直接隐藏提示框，不做任何加载操作
    $("#confirmModal").hide();
  });
});

3. 关键细节说明 #

• 如果你需要更灵活的请求（比如处理请求头、POST参数），可以用$.ajax()代替$.load()，比如：

$.ajax({
  url: "your-external-content.html",
  type: "GET",
  success: function(data) {
    $("#contentDisplay").html(data);
  },
  error: function() {
    $("#contentDisplay").html("加载失败");
  }
});

• 提示框的样式可以根据你的需求自定义，比如调整位置、背景色、按钮样式等；
• 触发提示框的时机也可以自己改，比如绑定到某个页面按钮的点击事件，而不是页面加载就显示。

这样就能完美实现你想要的功能啦！

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