jQuery实现简单弹出框
以下是使用jQuery实现一个简单弹出框的示例代码：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 弹出框示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="open-popup">打开弹出框</button>
<div id="popup" style="display:none;">
<p>这是一个简单的弹出框。</p>
<button id="close-popup">关闭</button>
</div>
<script>
$(document).ready(function(){
$("#open-popup").click(function(){
$("#popup").fadeIn();
});
$("#close-popup").click(function(){
$("#popup").fadeOut();
});
});
</script>
</body>
</html>这段代码中，我们定义了一个按钮用于触发弹出框的显示，以及一个弹出框本身。弹出框默认是隐藏的，通过CSS的display:none;属性实现。当用户点击“打开弹出框”按钮时，使用jQuery的fadeIn()方法显示弹出框。弹出框中有一个按钮用于关闭弹出框，点击这个按钮会使用fadeOut()方法隐藏弹出框。这个示例演示了如何使用jQuery来控制元素的显示和隐藏。
评论已关闭