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=order-ph

可以。可以在点击“查看”按钮时，使用JavaScript动态创建一个弹窗，然后将订单详情的HTML代码添加到弹窗中。同时，在弹窗中添加一个“关闭”按钮，当点击该按钮时，弹窗关闭。

以下是一个示例代码：

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>

JavaScript代码：

// 获取所有“查看”按钮
var detailBtns = document.querySelectorAll('.detail-btn');

// 遍历所有按钮，并添加点击事件处理程序
detailBtns.forEach(function(btn) {
  btn.addEventListener('click', function() {
    // 创建弹窗
    var popup = document.createElement('div');
    popup.classList.add('popup');

    // 创建关闭按钮
    var closeBtn = document.createElement('button');
    closeBtn.classList.add('close-btn');
    closeBtn.textContent = '关闭';

    // 创建订单详情表格
    var detailTable = this.nextElementSibling.cloneNode(true);

    // 将关闭按钮和订单详情表格添加到弹窗中
    popup.appendChild(closeBtn);
    popup.appendChild(detailTable);

    // 将弹窗添加到页面中
    document.body.appendChild(popup);

    // 给关闭按钮添加点击事件处理程序
    closeBtn.addEventListener('click', function() {
      document.body.removeChild(popup);
    });
  });
});

CSS代码：

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  color: #333;
  cursor: pointer;
}

.detail-table {
  display: none;
}
``