css点击登录跳出弹窗

在网站的开发过程中，有时候需要为用户提供登录功能。为了让页面看起来更加美观和专业，我们可以使用CSS实现点击登录跳出弹窗的效果。

/* CSS代码 */
.popup {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0, 0, 0, 0.4);
}
.popup-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 30%;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
 

首先，我们需要创建一个弹窗的HTML结构，然后使用CSS将其隐藏。当用户点击登录时，通过JavaScript操作CSS将其显示。

/* HTML代码 */
<button onclick="showPopup()">点击登录</button>
<div class="popup" id="popup">
  <div class="popup-content">
  
  <span class="close" onclick="hidePopup()">×
</span>
  
  <p>登录页面</p>
  
  <label>用户名：<input type="text"></label><br>
  
  <label>密码：<input type="password"></label><br>
  
  <button>登录</button>
  </div>
</div> 

在JavaScript代码中，我们为显示和隐藏弹窗的函数添加如下代码：

/* JavaScript代码 */
function showPopup() {
  document.getElementById('popup').style.display = 'block';
}
function hidePopup() {
  document.getElementById('popup').style.display = 'none';
}
 

通过CSS和JavaScript的结合，我们就能实现一个简单的登录弹窗效果。