jquery制作弹窗提示窗口代码分享


当然,这里是一个使用jQuery创建基本弹窗提示窗口的简单示例。这个例子使用了jQuery的`dialog()`方法,但需要注意的是,标准的jQuery库本身并不直接包含`dialog()`方法。这里我们通常会用jQuery UI库中的`dialog()`方法来创建弹窗。

首先,确保你的项目中已经包含了jQuery和jQuery UI库。

然后,你可以使用以下HTML和jQuery代码来创建一个简单的弹窗:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 弹窗示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
    // 弹窗初始化
    $("#dialog").dialog({
        autoOpen: false, // 默认不自动打开
        width: 400,      // 弹窗宽度
        height: 200,     // 弹窗高度
        modal: true,     // 模态弹窗,点击外部不会关闭
        buttons: {
            "确定": function() {
                $(this).dialog("close"); // 点击确定关闭弹窗
            },
            "取消": function() {
                $(this).dialog("close"); // 点击取消关闭弹窗
            }
        }
    });

    // 绑定按钮点击事件来打开弹窗
    $("#openDialog").click(function() {
        $("#dialog").dialog("open");
    });
});
</script>
</head>
<body>

<button id="openDialog">打开弹窗</button>

<div id="dialog" title="提示">
    <p>这是一个弹窗提示信息。</p>
</div>

</body>
</html>

在这个例子中,我们创建了一个`div`元素作为弹窗的内容,并通过jQuery UI的`dialog()`方法来初始化和控制它。我们设置了一个按钮,当点击这个按钮时,弹窗会显示出来。弹窗中包含了一些基本的文本和一个“确定”及一个“取消”按钮,点击这些按钮都会关闭弹窗。

请确保你的项目能够访问到jQuery和jQuery UI的CDN链接,否则这个示例将无法正常工作。