body styleorder-list font-family Arial sans-serif; color #333; width 80; margin 0 auto;order-item border 1px solid #ccc; padding 10px; margin-bottom 20px;order-itemhover box-shadow 0 0 5

可以的，可以通过添加一个遮罩层和一个弹窗来实现。具体步骤如下：

1. 在 HTML 中添加遮罩层和弹窗的代码：

<div class="mask"></div>
<div class="popup">
  <div class="popup-header">
    <span class="popup-title">订单详情</span>
    <span class="popup-close">&times;</span>
  </div>
  <div class="popup-content">
    <!-- 订单详情内容 -->
  </div>
</div>

2. 在 CSS 中设置遮罩层和弹窗的样式：

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 800px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f5f5f5;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.popup-title {
  font-size: 18px;
  font-weight: bold;
}

.popup-close {
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

.popup-content {
  padding: 10px;
}

3. 在 JavaScript 中添加打开和关闭弹窗的代码：

var detailBtns = document.querySelectorAll('.detail-btn');
var mask = document.querySelector('.mask');
var popup = document.querySelector('.popup');
var popupContent = popup.querySelector('.popup-content');
var popupClose = popup.querySelector('.popup-close');

for (var i = 0; i < detailBtns.length; i++) {
  detailBtns[i].addEventListener('click', function() {
    var detailTable = this.parentNode.nextElementSibling;
    var orderNumber = this.parentNode.previousElementSibling.textContent;
    var orderDetail = detailTable.innerHTML;
    popupContent.innerHTML = '<div class="order-number">' + orderNumber + '</div>' + orderDetail;
    mask.style.display = 'block';
    popup.style.display = 'block';
  });
}

popupClose.addEventListener('click', function() {
  mask.style.display = 'none';
  popup.style.display = 'none';
});

4. 最后，需要将原有的订单详情内容从 .detail-table 中移除，以免重复出现。

将 HTML 中

<div class="detail-table">
  <!-- 订单详情内容 -->
</div>

改为

<div class="detail-table">
  <!-- 空 -->
</div>

这样，当用户点击“查看”按钮时，就会弹出一个包含订单详情的弹窗，弹窗中的内容可以根据需要自行修改。用户可以通过关闭按钮或点击遮罩层来关闭弹窗