正文

jquery弹出div窗口 jquery 弹出窗口

小编
小编 V管理员 /0 评论 /15 阅读
0119
欧意国内注册

我们需要创建一个HTML文件，然后在其中添加一个标题和一个按钮，当用户点击按钮时，我们将使用jQuery弹出一个div窗口。

1、创建HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery弹出div窗口示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            border: 1px solid black;
            padding: 20px;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <h1>jQuery弹出div窗口示例</h1>
    <p>这是一个使用jQuery弹出div窗口的示例，当用户点击下面的按钮时，将显示一个包含标题和内容的div窗口。</p>
    <button id="showPopup">显示弹出窗口</button>
    <div id="popup">
        <h2>弹出窗口标题</h2>
        <p>这里是弹出窗口的内容，请确保您已阅读并理解了以下内容：</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

2、创建一个名为script.js的JavaScript文件，并在其中编写以下代码：

$(document).ready(function() {
    $("#showPopup").click(function() {
        $("#popup").show();
    });
});

现在，当用户点击“显示弹出窗口”按钮时，将弹出一个包含标题和内容的div窗口。