css弹出文本框 |css实例下载

/*CSS样式*/
.popup {
position: absolute;
z-index: 999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
width: 300px;
border-radius: 5px;
background-color: white;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
font-size: 16px;
line-height: 1.5;
}
.popup .content {
padding: 20px;
}
.popup .close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
/*HTML结构*/点击打开弹出框
这是弹出文本框的标题
这里是文本框的内容
查看详情
X
/*JavaScript代码*/
function showPopup() {
var popup = document.getElementById("popup");
popup.style.display = "block";
}
function hidePopup() {
var popup = document.getElementById("popup");
popup.style.display = "none";
}

上面是一个基本的CSS弹出文本框的实现方法。大家首先定义了一个名为.popup的CSS样式，用来设置弹出文本框的样式。其中，大家使用了position属性来将文本框定位在页面正中央，使用z-index属性来设置层级，使其位于其他元素之上。大家还给它添加了一个close按钮，用来关闭文本框。

在HTML中，大家创建了一个按钮，并设置了其onclick事件，实现了点击按钮弹出文本框。同时，大家也创建了一个popup div元素，用来承载弹出文本框的内容。在JavaScript中，大家编写了两个函数，用来实现文本框的显示和隐藏。

CSS弹出文本框是一种非常实用的交互方式，可以增强用户体验，提高页面的交互性和响应速度。在实际开发中，大家可以根据具体需求，灵活运用它来实现各种交互效果。