<button id="checkoutButton">去结算</button>

<!-- 弹窗结构 -->
<div id="cartModal" class="modal hidden">
  <h3>确认您的购物车商品</h3>
  <ul id="cartItems"></ul>
  <button id="confirmCheckout">确认并下单</button>
  <button id="cancelCheckout">取消</button>
</div>

<script>
// 获取相关元素和初始化数据
let checkoutButton = document.getElementById('checkoutButton');
let cartModal = document.getElementById('cartModal');
let confirmCheckoutButton = document.getElementById('confirmCheckout');
let cartItems = document.getElementById('cartItems');

// 填充购物车商品（此处仅为示例，实际应用中从服务器获取）
cartItems.innerHTML = `
  <li>商品A x 2</li>
  <li>商品B x 1</li>
`;

// 显示购物车确认弹窗
checkoutButton.addEventListener('click', function() {
  cartModal.classList.remove('hidden');
});

// 确认下单操作
confirmCheckoutButton.addEventListener('click', function() {
  cartModal.classList.add('hidden');
  
  // 调用下单API（模拟请求）
  placeOrder();
});

// 隐藏弹窗
document.addEventListener('click', function(event) {
  if (event.target === cartModal || event.target === cancelCheckoutButton) {
    cartModal.classList.add('hidden');
  }
});

// 下单操作（模拟请求）
function placeOrder() {
  console.log('订单已提交！');
}
</script>

<style>
/* 弹窗样式 */
.modal {
  /* 具体样式请根据需求设置 */
}
.hidden {
  display: none;
}
</style>