在現(xiàn)代網(wǎng)頁設(shè)計(jì)中，彈出層是一個(gè)非常常見的元素，它可以為我們的網(wǎng)站提供更好的用戶體驗(yàn)。比如，我們在商品詳情頁中需要添加一個(gè)購買彈出層，用戶可以在彈出層中選擇需要購買的商品信息，這樣可以簡化用戶操作，提高交互效率。

在HTML5中，我們可以使用預(yù)設(shè)的標(biāo)簽來創(chuàng)建彈出層選擇商品代碼。以下是一段基礎(chǔ)的HTML5彈出層選擇商品代碼。

<div class="popup">
<div class="popup-content">
<div class="popup-header">
<span class="close-popup">×</span>
<div class="popup-title">選擇您需要購買的商品</div>
</div>
<div class="popup-body">
<ul>
<li>
<label>
<input type="checkbox" name="product" value="product1">
商品1 - 99元
</label>
</li>
<li>
<label>
<input type="checkbox" name="product" value="product2">
商品2 - 199元
</label>
</li>
<li>
<label>
<input type="checkbox" name="product" value="product3">
商品3 - 299元
</label>
</li>
</ul>
<button class="add-to-cart">加入購物車</button>
</div>
</div>
</div>

以上代碼中，我們使用了HTML5中的<ul>和<li>標(biāo)簽來創(chuàng)建商品列表，使用了<input>標(biāo)簽來創(chuàng)建復(fù)選框。另外，我們還使用了一些自定義的CSS類來進(jìn)行樣式的修改和控制，比如.popup、.popup-content、.popup-header等。

通過這樣一個(gè)基礎(chǔ)的HTML5彈出層選擇商品代碼，我們可以快速地實(shí)現(xiàn)一個(gè)簡單的購買功能，提供更好的用戶體驗(yàn)。當(dāng)然，根據(jù)實(shí)際項(xiàng)目的需求，我們還可以進(jìn)行更多的優(yōu)化和改進(jìn)，比如增加商品數(shù)量選擇、選擇成功提示等功能。