这个网站是一个简单的网页,主要包含一个名为.swtCenter
的弹出框,当用户点击某个按钮时,该弹出框会显示出来。
.absolute
类用于设置元素的绝对定位,使其相对于其最近的已定位祖先元素进行定位;.swtCenter
类用于定义弹出框的样式,包括宽度、高度、背景颜色、位置等属性;.swtCenter h3
类用于设置弹出框内标题的样式,包括字体大小、行高、对齐方式和颜色等属性。
要实现这个功能,可以使用HTML和CSS代码。以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<style>
.absolute { position: absolute; }
.swtCenter { display:none; width:255px; height:230px; background-color:#FFF; position:fixed; left:50%; top:50%; z-index:9999999; margin-left:-127px; margin-top:-130px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -moz-box-shadow:0 0 20px rgba(10,2,4,0.75); -webkit-box-shadow:0 0 20px rgba(10,2,4,0.75); box-shadow:0 0 20px rgba(10,2,4,0.75); }
.swtCenter h3 { width:100%; font-size:20px; line-height:20px; text-align:center; color:#00; }
</style>
<script>
function showPopup() {
var popup = document.getElementById("popup");
popup.style.display = "block";
}
</script>
</head>
<body>
<button onclick="showPopup()">点击显示弹出框</button>
<div id="popup" class="swtCenter">
<h3>这是一个弹出框</h3>
</div>
</body>
</html>
在这个示例中,当用户点击“点击显示弹出框”按钮时,触发showPopup()
函数,将.swtCenter
类应用于ID为popup
的元素,从而显示弹出框。