human div class=order-list div class=order-item div class=order-number订单号：123456789div div class=order-receiver收货人：张三div div class=order-address地址：北京市朝阳区XXX路XXX号div div class=or

Yes, it is possible to convert this into a popup window that opens up when clicked, with a close button added. Here is an example of how it can be done using JavaScript and CSS:

HTML:

<div class="order-list">
  <div class="order-item">
    <div class="order-number">订单号：123456789</div>
    <div class="order-receiver">收货人：张三</div>
    <div class="order-address">地址：北京市朝阳区XXX路XXX号</div>
    <div class="order-phone">手机号：13812345678</div>
    <div class="order-status" style="color: green;">订单状态：已完成</div>
    <div class="order-payment">支付方式：支付宝</div>
    <div class="order-detail">
      <button class="detail-btn">查看详细信息</button>
    </div>
    <div class="detail-table">
      <table>
        <thead>
          <tr>
            <th>商品图片</th>
            <th>商品名*数量</th>
            <th>价格</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><img src="product1.jpg" alt="商品1图片"></td>
            <td>商品1*2</td>
            <td>￥100.00</td>
          </tr>
          <tr>
            <td><img src="product2.jpg" alt="商品2图片"></td>
            <td>商品2*1</td>
            <td>￥50.00</td>
          </tr>
        </tbody>
      </table>
      <div class="order-amount">
        <div>商品总额：￥250.00</div>
        <div>快递费：￥0.00</div>
        <div>总价：￥250.00</div>
      </div>
    </div>
  </div>
  
  <div class="order-item">
    <div class="order-number">订单号：123456789</div>
    <div class="order-receiver">收货人：张三</div>
    <div class="order-address">地址：北京市朝阳区XXX路XXX号</div>
    <div class="order-phone">手机号：13812345678</div>
    <div class="order-status" style="color: green;">订单状态：已完成</div>
    <div class="order-payment">支付方式：支付宝</div>
    <div class="order-detail">
      <button class="detail-btn">查看详细信息</button>
    </div>
    <div class="detail-table">
      <table>
        <thead>
          <tr>
            <th>商品图片</th>
            <th>商品名*数量</th>
            <th>价格</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><img src="product1.jpg" alt="商品1图片"></td>
            <td>商品1*2</td>
            <td>￥100.00</td>
          </tr>
          <tr>
            <td><img src="product2.jpg" alt="商品2图片"></td>
            <td>商品2*1</td>
            <td>￥50.00</td>
          </tr>
        </tbody>
      </table>
      <div class="order-amount">
        <div>商品总额：￥250.00</div>
        <div>快递费：￥0.00</div>
        <div>总价：￥250.00</div>
      </div>
    </div>
  </div>
</div>

<div class="popup-overlay"></div>
<div class="popup">
  <div class="popup-content">
    <button class="close-btn">关闭</button>
    <div class="detail-table"></div>
  </div>
</div>

CSS:

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

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  padding: 20px;
  max-width: 80%;
  max-height: 80%;
  overflow: auto;
  display: none;
}

.popup-content {
  position: relative;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.order-item {
  margin-bottom: 20px;
}

.detail-table {
  display: none;
}

.popup .detail-table {
  display: block;
}

JavaScript:

const orderItems = document.querySelectorAll('.order-item');
const popupOverlay = document.querySelector('.popup-overlay');
const popup = document.querySelector('.popup');
const popupContent = document.querySelector('.popup-content');
const closeBtn = document.querySelector('.close-btn');

for (let i = 0; i < orderItems.length; i++) {
  const orderDetailBtn = orderItems[i].querySelector('.detail-btn');
  const orderDetailTable = orderItems[i].querySelector('.detail-table').innerHTML;
  
  orderDetailBtn.addEventListener('click', () => {
    popupContent.innerHTML = orderDetailTable;
    popupOverlay.style.display = 'block';
    popup.style.display = 'block';
  });
}

closeBtn.addEventListener('click', () => {
  popupOverlay.style.display = 'none';
  popup.style.display = 'none';
});

This code will add a click event listener to each "查看详细信息" button, and when clicked, it will copy the content of the corresponding order's detail table and insert it into the popup window's content. It will then display the popup and overlay on top of the page. Clicking the "关闭" button or clicking outside the popup will close the popup and overlay