CSS外链式弹出框是一种用来在网页中显示某些内容的常见方式，它可以让开发者轻松地创建漂亮、有用的弹出框，同时不需要使用太多的JavaScript。

.btn {
padding: 10px 20px;
background-color: #007bff;
border: none;
color: #fff;
cursor: pointer;
}
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
display: none;
justify-content: center;
align-items: center;
}
.popup-content {
padding: 20px;
background-color: #fff;
border-radius: 5px;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
cursor: pointer;
}

如上述所示，这是一个使用CSS创建外链式弹出框的基本CSS代码。其中有如下几个要点：

• .popup的position值要设置为fixed，这将使弹出框始终位于屏幕上方。
• .popup-content是弹出框的实际内容，可以自由添加任意HTML元素。
• 一定要设置display: none，否则弹出框启动时会一直显示。

下面的代码展示如何使用这些CSS代码创建一个基本的外链式弹出框：

&lthtml>&lthead>&ltlink rel="stylesheet" href="popup.css">&lt/head>&ltbody>&ltp>&ltbutton class="btn" onclick="showPopup()">显示弹出框&lt/p>&ltdiv class="popup" id="popup">&ltdiv class="popup-content">&lth2>这是一个弹出框&lt/h2>&ltp>在这里添加任何内容。&lt/p>&ltspan class="close-btn" onclick="hidePopup()">×&lt/div>&lt/div>&ltscript>function showPopup() {
document.getElementById("popup").style.display = "flex";
}
function hidePopup() {
document.getElementById("popup").style.display = "none";
}
&lt/script>&lt/body>&lt/html>

如上述所述，当按钮被点击时，JS将记录弹出框并将其显示出来。如果要关闭弹出框，则只需再次单击其中的X按钮或任何其他可能关闭弹出框的元素。

总之，在开发Web站点时，CSS外链式弹出框是非常有用的，因为它可以让开发人员创建出更具交互性、视觉效果更好的UI。