Home >Web Front-end >Front-end Q&A >Example to explain how to use jquery to create a prompt box with whether
Example to explain how to use jquery to create a prompt box with whether
- PHPzOriginal
- 2023-04-07 09:25:51645browse
With the popularity of the Internet, more and more websites are beginning to use jQuery for development. In jQuery, the prompt box is a very practical function. This article will introduce how to use jQuery to create a prompt box with whether.
1. Overview
In many websites, we often see such a prompt box: when we click a button or link, a dialog box will pop up to prompt us whether Confirm to do this. Such a prompt box generally contains two buttons: "OK" and "Cancel", and the user can choose whether to continue the operation.
In jQuery, you can easily implement this kind of prompt box with whether. First you need to use the jQuery UI library, and then use the dialog control in it to create a dialog box.
2. Create a dialog box
The following is a simple HTML page, which contains a button and a dialog box:
<!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>
As you can see, we introduced I used jQuery and the jQuery UI library and created a button and a dialog box. The content of the dialog box has only one prompt text, and its title is "Prompt".
Next, we need to use jQuery's dialog control to enable the dialog box to be displayed. The specific method is as follows:
$(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");
});
});
In this code, we first call the dialog() method to create a dialog box and configure it. Among them, autoOpen: false means that the dialog box is closed when initialized, modal: true means that the dialog box is a modal box (that is, after the dialog box pops up, the background will turn gray and cannot be operated), and the buttons option is used to define the dialog box button in the box. In this example, we define two buttons, OK and Cancel, and specify the actions to be performed when the user clicks these buttons.
At the end of the code, we bind a click event to the button. When the user clicks the button, a dialog box will pop up.
3. Complete code
The following is the complete HTML and JavaScript code for your reference:
<!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>
The above is the entire content of using jQuery to create a prompt box with a yes or no. Hope this article can be helpful to readers.
The above is the detailed content of Example to explain how to use jquery to create a prompt box with whether. For more information, please follow other related articles on the PHP Chinese website!