如何用jquery设计一个带是否的提示框

发布时间：2023-08-08 11:30:23 所属栏目：教程来源：未知

导读： 　　给大家分享一下如何用jquery制作一个带是否的提示框的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章

　　给大家分享一下如何用jquery制作一个带是否的提示框的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

　　一、概述

　　在很多网站中，我们经常会看到这样一种提示框：当我们点击某个按钮或链接时，会弹出一个对话框，提示我们是否确定执行该操作。这样的提示框一般包含“确定”和“取消”两个按钮，用户可以选择是否继续操作。

　　在 jQuery 中，可以很容易地实现这种带是否的提示框。首先需要使用 jQuery UI 库，然后利用其中的 dialog 控件来创建对话框。

　　二、创建对话框

　　下面是一个简单的 HTML 页面，其中包含一个按钮和一个对话框：

　　<!DOCTYPE html>

　　<html>

　　 <head>

　　    <title>jQuery 带是否的提示框</title>

　　    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

　　    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

　　    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

　　 </head>

　　 <body>

　　    <button id="btn">删除</button>

　　    <div id="dialog-confirm" title="提示">

　　      <p>确定要删除吗？</p>

　　    </div>

　　 </body>

　　</html>

　　可以看到，我们在页面中引入了 jQuery 和 jQuery UI 库，并创建了一个按钮和一个对话框。对话框的内容只有一个提示文字，其标题为“提示”。

　　接下来，我们需要利用 jQuery 的 dialog 控件来使得对话框能够显示出来。具体做法如下：

　　$(document).ready(function() {

　　 $("#dialog-confirm").dialog({

　　    autoOpen: false,

　　    modal: true,

　　    buttons: {

　　      "确定": function() {

　　        // 执行删除操作

　　        // ...

　　        $(this).dialog("close");

　　      },

　　      "取消": function() {

　　        $(this).dialog("close");

　　      }

　　    }

　　 });

　　 $("#btn").click(function() {

　　    $("#dialog-confirm").dialog("open");

　　 });

　　});

　　在这段代码中，我们首先调用 dialog() 方法来创建对话框，并对其进行配置。其中，autoOpen: false 表示对话框初始化时是关闭状态，modal: true 表示对话框是一个模态框（即对话框弹出后，背景会变成灰色且不能操作），buttons 选项则是用来定义对话框中的按钮。在此例中，我们定义了“确定”和“取消”两个按钮，并指定当用户点击这些按钮时执行的操作。

　　在代码的最后，我们为按钮绑定了一个 click 事件，当用户点击按钮时，就会弹出对话框。

　　三、完整代码

　　下面是完整的 HTML 和 JavaScript 代码，供大家参考：

　　<!DOCTYPE html>

　　<html>

　　 <head>

　　    <title>jQuery 带是否的提示框</title>

　　    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

　　    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

　　    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

　　    <script>

　　      $(document).ready(function() {

　　        $("#dialog-confirm").dialog({

　　          autoOpen: false,

　　          modal: true,

　　          buttons: {

　　            "确定": function() {

　　              // 执行删除操作

　　              // ...

　　              $(this).dialog("close");

　　            },

　　            "取消": function() {

　　              $(this).dialog("close");

　　            }

　　          }

　　        });

　　        $("#btn").click(function() {

　　          $("#dialog-confirm").dialog("open");

　　        });

　　      });

　　    </script>

　　 </head>

　　 <body>

　　    <button id="btn">删除</button>

　　    <div id="dialog-confirm" title="提示">

　　      <p>确定要删除吗？</p>

　　    </div>

　　 </body>

　　</html>

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!