當網站需要用戶登錄時，一個彈出式的登錄窗口是一個非常方便的解決方案。CSS提供了許多方法來實現彈出登錄窗口，其中一種方法是通過使用偽元素和position屬性。

.login {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
z-index: 9999;
}
.login:before {
content: "";
position: absolute;
top: -10px;
right: -10px;
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid #ccc;
transform: rotate(45deg);
z-index: -1;
}
.login-form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.login-form label {
margin-bottom: 10px;
}
.login-form input {
width: 100%;
height: 30px;
padding: 5px;
margin-bottom: 10px;
}
.login-form button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}

以上是一個基本的CSS樣式，用于創建一個居中的登錄窗口。通過使用before偽元素創建一個三角形陰影，并使用z-index將其放置在文本框之后。使用flexbox布局來使文本框和登錄按鈕在窗口中垂直和水平居中。

在HTML中，我們可以創建一個登錄按鈕，并使用onclick事件調用一個JavaScript函數來顯示登錄窗口：

<button onclick="showLogin()">登錄</button>
<div class="login" id="login" style="display: none;">
<form class="login-form">
<label for="username">用戶名</label>
<input type="text" name="username" id="username" required>
<label for="password">密碼</label>
<input type="password" name="password" id="password" required>
<button type="submit" onclick="login()">登錄</button>
</form>
</div>

在JavaScript中，我們創建showLogin()函數用于顯示登錄窗口，并為登錄窗口添加一個點擊事件來隱藏窗口：

function showLogin() {
document.getElementById("login").style.display = "block";
}
document.querySelector(".login").addEventListener("click", function(e) {
if (e.target === this) {
this.style.display = "none";
}
});

通過這種方式，我們可以輕松地實現一個彈出式登錄窗口，而不必使用復雜的JavaScript或jQuery代碼。