CSS模板的彈出式功能是網站設計中常用的一種特效，它能夠在頁面上展示出一個彈出框，讓用戶得以更方便地查看所需的內容或進行相關操作。以下是一個基于CSS模板的彈出式實現的示例：

/* CSS樣式表 */
.modal-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
/* HTML代碼 */
<button id="open-modal">打開彈出框</button>
<div class="modal-container" id="modal-container">
<div class="modal-content">
<h2>這是一個彈出框</h2>
<p>在此處添加需要展示的內容。</p>
<span class="modal-close" id="modal-close">×</span>
</div>
</div>
<script>
// 彈出框打開
document.getElementById("open-modal").addEventListener("click", function() {
document.getElementById("modal-container").style.display = "block";
});
// 彈出框關閉
document.getElementById("modal-close").addEventListener("click", function() {
document.getElementById("modal-container").style.display = "none";
});
</script>

在上面的示例中，我們定義了一個modal-container類表示彈出框的容器，通過設置position屬性為fixed實現它的浮動，通過設置z-index屬性讓它的層級超過其他元素。同時，我們定義了一個modal-content類表示彈出框的內容區域，在其中添加需要展示的內容。為了讓彈出框在頁面居中，我們使用了transform屬性進行定位。最后，我們通過JavaScript實現了打開和關閉彈出框的功能。