如何在警告对话框中显示用户输入的详细信息？

<div id="alert-dialog">
  <h3>警告</h3>
  <p>请输入详细信息：</p>
  <input type="text" id="input-details" placeholder="请输入详细信息">
  <button id="confirm-btn">确认</button>
  <button id="cancel-btn">取消</button>
</div>

#alert-dialog {
  width: 300px;
  padding: 20px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 5px;
}

#input-details {
  width: 100%;
  margin-bottom: 10px;
}

#confirm-btn, #cancel-btn {
  margin-top: 10px;
}

$(document).ready(function() {
  // 显示警告对话框
  $('#alert-dialog').show();

  // 确认按钮点击事件
  $('#confirm-btn').click(function() {
    var details = $('#input-details').val();
    // 在警告对话框中显示用户输入的详细信息
    $('#alert-dialog').append('<p>用户输入的详细信息：' + details + '</p>');
    // 执行其他操作
    // ...
  });

  // 取消按钮点击事件
  $('#cancel-btn').click(function() {
    // 关闭警告对话框
    $('#alert-dialog').hide();
    // 执行其他操作
    // ...
  });
});