如何在 Jquery UI 对话框中实现“确认”对话框？

小开

这个行吗？

$("ul li a").click(function(e) {
e.preventDefault();
$('#confirmDialog').show();


var delete_path = $(this).attr('href');


$('#confirmDialog a.ok').unbind('click'); //  just in case the cancel link
//  is not the  only way you can
//  close your dialog
$('#confirmDialog a.ok').click(function(e) {
e.preventDefault();
window.location.href = delete_path;
});


});


$('#confirmDialog a.cancel').click(function(e) {
e.preventDefault();
$('#confirmDialog').hide();
$('#confirmDialog a.ok').unbind('click');
});

小开

这样吧:

$("ul li a").click(function() {


el = $(this);
$("#confirmDialog").dialog({ autoOpen: false, resizable:false,
draggable:true,
modal: true,
buttons: { "Ok": function() {
el.parent().remove();
$(this).dialog("close"); } }
});
$("#confirmDialog").dialog("open");


return false;
});

我已经在这个 html 中测试过了:

<ul>
<li><a href="#">Hi 1</a></li>
<li><a href="#">Hi 2</a></li>
<li><a href="#">Hi 3</a></li>
<li><a href="#">Hi 4</a></li>
</ul>

它消除了整个 li 元素，您可以根据需要调整它。

小开

最佳答案

我只需要解决同样的问题。使其正常工作的关键是，dialog必须在 click事件处理程序中部分初始化，用于您希望使用确认功能的链接(如果您希望对多个链接使用此功能)。这是因为链接的目标 URL 必须注入到确认按钮单击的事件处理程序中。我使用了一个 CSS 类来指示哪些链接应该具有确认行为。

下面是我的解决方案，抽象出来以便适用于一个示例。

<div id="dialog" title="Confirmation Required">
Are you sure about this?
</div>


<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true
});
});


$(".confirmLink").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");


$("#dialog").dialog({
buttons : {
"Confirm" : function() {
window.location.href = targetUrl;
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});


$("#dialog").dialog("open");
});
</script>


<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>

我相信这将为您工作，如果您可以生成您的链接与 CSS 类(confirmLink，在我的例子)。

这是一个带有代码的 Jsfiddle。

为了充分披露，我将注意到，我花了几分钟在这个特定的问题上，我提供了一个类似的答案这个问题，这也没有一个接受的答案时间。

小开

我发现 Paul 的回答并不完全正确，因为他在对话框实例化之后设置选项的方式不正确。这是我正在工作的代码。我并没有按照保罗的例子进行裁剪，但这只是猫的胡须的不同，在某些元素的命名方面有所不同。你应该能解决的。更正在 click 事件上按钮的对话框选项的 setter 中。

$(document).ready(function() {


$("#dialog").dialog({
modal: true,
bgiframe: true,
width: 500,
height: 200,
autoOpen: false
});




$(".lb").click(function(e) {


e.preventDefault();
var theHREF = $(this).attr("href");


$("#dialog").dialog('option', 'buttons', {
"Confirm" : function() {
window.location.href = theHREF;
},
"Cancel" : function() {
$(this).dialog("close");
}
});


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


});


});

希望这能帮助别人，因为这篇文章最初让我走上了正确的道路，我认为我最好发表更正。

小开

如上所述。以前的帖子让我走上了正确的道路。这就是我是如何做到的。其思想是在表中的每一行旁边都有一个图像(由数据库中的 PHP 脚本生成)。当单击一个图像时，用户将被重定向到 URL，因此，适当的记录将从数据库中删除，同时在 jQuery UI Dialog 中显示与所单击记录相关的一些数据。

JavaScript 代码:

$(document).ready(function () {
$("#confirmDelete").dialog({
modal: true,
bgiframe: true,
autoOpen: false
});
});


function confirmDelete(username, id) {
var delUrl = "/users/delete/" + id;
$('#confirmDelete').html("Are you sure you want to delete user: '" + username + "'");
$('#confirmDelete').dialog('option', 'buttons', {
"No": function () {
$(this).dialog("close");
},
"Yes": function () {
window.location.href = delUrl;
}
});
$('#confirmDelete').dialog('open');
}

对话框 div:

<div id="confirmDelete" title="Delete User?"></div>

图片链接:

<img src="img/delete.png" alt="Delete User" onclick="confirmDelete('<?=$username;?>','<?=$id;?>');"/>

这样就可以将 PHP 循环值传递到对话框中。唯一的缺点是使用 GET 方法实际执行操作。

小开

(截至2016年3月22日，链接到的页面上的下载无法工作。我把链接留在这里，以防开发人员在某个时候修复它，因为它是一个很棒的小插件。原文如下。另一种选择，以及一个实际可行的链接: 查询，确认。)

它可能太简单，你的需要，但你可以尝试这个 JQuery 确认插件。它真的很容易使用，并在许多情况下完成工作。

小开

这就是你问题的答案。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>Santa Luisa</TITLE>
<style>
body{margin:0;padding:0;background-color:#ffffff;}
a:link {color:black;}
a:visited {color:black;}
a:hover {color:red;}
a:active {color:red;}
</style>


</HEAD>
<body>


<link rel="stylesheet" href="jquery/themes/base/jquery.ui.all.css">
<script src="jquery-1.4.4.js"></script>


<script src="external/jquery.bgiframe-2.1.2.js"></script>
<script src="ui/jquery.ui.core.js"></script>


<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.mouse.js"></script>
<script src="ui/jquery.ui.draggable.js"></script>
<script src="ui/jquery.ui.position.js"></script>


<script src="ui/jquery.ui.resizable.js"></script>
<script src="ui/jquery.ui.dialog.js"></script>


<link rel="stylesheet" href="demos.css">
<script>
var lastdel;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,modal: true,closeOnEscape: true
});


$(".confirmLink").click(function(e) {
e.preventDefault();
var lastdel = $(this).attr("href");


});




$("#si").click( function() {
$('#dialog').dialog('close');
window.location.href =lastdel;


});
$("#no").click( function() {
$('#dialog').dialog('close');
});
});


</script>


<SCRIPT LANGUAGE="JavaScript">
<!--
var currentimgx;
var cimgoverx=200-6;
var cimgoutx=200;




function overbx(obj){
color='#FF0000';
width='3px';
obj.style.borderTopWidth = width;
obj.style.borderTopColor =color;
obj.style.borderTopStyle ='solid';


obj.style.borderLeftWidth = width;
obj.style.borderLeftColor =color;
obj.style.borderLeftStyle ='solid';


obj.style.borderRightWidth = width;
obj.style.borderRightColor =color;
obj.style.borderRightStyle ='solid';


obj.style.borderBottomWidth = width;
obj.style.borderBottomColor =color;
obj.style.borderBottomStyle ='solid';




currentimgx.style.width=cimgoverx+"px";
currentimgx.style.height=cimgoverx+"px";


}


function outbx(obj){
obj.style.borderTopWidth = '0px';
obj.style.borderLeftWidth = '0px';
obj.style.borderRightWidth = '0px';
obj.style.borderBottomWidth = '0px';


currentimgx.style.width=cimgoutx+"px";
currentimgx.style.height=cimgoutx+"px";
}


function ifocusx(obj){
color='#FF0000';
width='3px';
obj.style.borderTopWidth = width;
obj.style.borderTopColor =color;
obj.style.borderTopStyle ='solid';


obj.style.borderLeftWidth = width;
obj.style.borderLeftColor =color;
obj.style.borderLeftStyle ='solid';


obj.style.borderRightWidth = width;
obj.style.borderRightColor =color;
obj.style.borderRightStyle ='solid';


obj.style.borderBottomWidth = width;
obj.style.borderBottomColor =color;
obj.style.borderBottomStyle ='solid';


}


function iblurx(obj){
color='#000000';
width='3px';
obj.style.borderTopWidth = width;
obj.style.borderTopColor =color;
obj.style.borderTopStyle ='solid';


obj.style.borderLeftWidth = width;
obj.style.borderLeftColor =color;
obj.style.borderLeftStyle ='solid';


obj.style.borderRightWidth = width;
obj.style.borderRightColor =color;
obj.style.borderRightStyle ='solid';


obj.style.borderBottomWidth = width;
obj.style.borderBottomColor =color;
obj.style.borderBottomStyle ='solid';
}


function cimgx(obj){
currentimgx=obj;
}




function pause(millis){
var date = new Date();
var curDate = null;


do { curDate = new Date(); }
while(curDate-date < millis);
}




//-->
</SCRIPT>
<div id="dialog" title="CONFERMA L`AZIONE" style="text-align:center;">
<p><FONT  COLOR="#000000" style="font-family:Arial;font-size:22px;font-style:bold;COLOR:red;">CONFERMA L`AZIONE:<BR>POSSO CANCELLARE<BR>QUESTA RIGA ?</FONT></p>


<p><INPUT TYPE="submit" VALUE="SI" NAME="" id="si"> --><INPUT TYPE="submit" VALUE="NO" NAME="" id="no"></p>
</div>






<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="100%" height="100%">
<TR valign="top" align="center">
<TD>
<FONT COLOR="red" style="font-family:Arial;font-size:25px;font-style:bold;color:red;">Modifica/Dettagli:<font style="font-family:Arial;font-size:20px;font-style:bold;background-color:yellow;color:red;">&nbsp;298&nbsp;</font><font style="font-family:Arial;font-size:20px;font-style:bold;background-color:red;color:yellow;">dsadas&nbsp;sadsadas&nbsp;</font>&nbsp;</FONT>
</TD>
</TR>


<tr valign="top">
<td align="center">
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">
<TR align="left">


<TD>
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">


<TR align="left">
<TD>
<font style="font-sixe:30px;"><span style="color:red;">1</span></font><br><TABLE class="tabela" CELLSPACING="0" CELLPADDING="0" BORDER="1" WIDTH="800px"><TR style="color:white;background-color:black;"><TD align="center">DATA</TD><TD align="center">CODICE</TD><TD align="center">NOME/NOMI</TD><TD  align="center">TESTO</TD><td>&nbsp;</td><td>&nbsp;</td></TR><TR align="center"><TD>12/22/2010&nbsp;</TD><TD>298&nbsp;</TD><TD>daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD><TD><A HREF="modificarigadiario.php?codice=298"  style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);"  style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=1';alert(lastdel);" class="confirmLink">Cancella</A></TD><TR align="center"><TD>22/10/2010&nbsp;</TD><TD>298&nbsp;</TD><TD>dfdsfsdfsf</TD><TD><A HREF="modificarigadiario.php?codice=298"  style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);"  style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=2';alert(lastdel);" class="confirmLink">Cancella</A></TD></TABLE><font style="font-sixe:30px;"><span style="color:red;">1</span></font><br>


</TD>
</TR>


</TABLE>
</TD>
</TR>
</TABLE>
</td>
</tr>
</tbody></table>




</body>
</html>

确保您有 jquery 1.4.4 还有 jquery.ui

小开

简单，简短的解决方案，我刚刚尝试，它的工作

  $('.confirm').click(function() {
$(this).removeClass('confirm');
$(this).text("Sure?");
$(this).unbind();
return false;
});

然后只需添加 class = “启用”到你的链接，它就可以工作了！

小开

尽管我不喜欢使用 eval，但对我来说它似乎是最简单的方法，根据不同的情况不会造成很多问题。类似于 javascript settimeout 函数。

<a href="#" onclick="javascript:confirm('do_function(params)');">Confirm</a>
<div id="dialog-confirm" title="Confirm" style="display:none;">
<p>Are you sure you want to do this?</p>
</div>
<script>
function confirm(callback){
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: false,
buttons: {
"Ok": function() {
$( this ).dialog( "close" );
eval(callback)
},
Cancel: function() {
$( this ).dialog( "close" );
return false;
}
}
});
}


function do_function(params){
console.log('approved');
}
</script>

小开

我为 jquery ui 确认对话框创建了自己的函数。这是密码

function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
$('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({
draggable: false,
modal: true,
resizable: false,
width: 'auto',
title: dialogTitle || 'Confirm',
minHeight: 75,
buttons: {
OK: function () {
if (typeof (okFunc) == 'function') {
setTimeout(okFunc, 50);
}
$(this).dialog('destroy');
},
Cancel: function () {
if (typeof (cancelFunc) == 'function') {
setTimeout(cancelFunc, 50);
}
$(this).dialog('destroy');
}
}
});
}

现在要在代码中使用它，只需编写以下代码

myConfirm('Do you want to delete this record ?', function () {
alert('You clicked OK');
}, function () {
alert('You clicked Cancel');
},
'Confirm Delete'
);

继续。

小开

$("ul li a").live('click', function (e) {
e.preventDefault();


$('<div></div>').appendTo('body')
.html('<div><h6>Are you sure about this?</h6></div>')
.dialog({
modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
width: 'auto', modal: true, resizable: false,
buttons: {
Confirm: function () {
// $(obj).removeAttr('onclick');
// $(obj).parents('.Parent').remove();


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


window.location.reload();
},
No: function () {
$(this).dialog("close");
}
},
Cancel: function (event, ui) {
$(this).remove();
}
});


return false;
});

小开

这就是我的解决办法。.我希望这对大家都有帮助。它是临时写的，而不是抄袭的，所以请原谅我的任何错误。

$("#btn").on("click", function(ev){
ev.preventDefault();


dialog.dialog("open");


dialog.find(".btnConfirm").on("click", function(){
// trigger click under different namespace so
// click handler will not be triggered but native
// functionality is preserved
$("#btn").trigger("click.confirmed");
}
dialog.find(".btnCancel").on("click", function(){
dialog.dialog("close");
}
});

就我个人而言，我更喜欢这个解决方案:)

编辑: 对不起。.我真的应该解释得更详细些。我喜欢它，因为在我看来它是一个优雅的解决方案。当用户单击需要首先确认的按钮时，事件将被取消。当单击确认按钮时，解决方案不是模拟链接单击，而是在原始按钮上触发相同的本机 jquery 事件(单击) ，如果没有确认对话框，这个事件就会被触发。唯一的区别是不同的事件名称空间(在本例中是“确认”) ，因此不会再次显示确认对话框。然后，Jquery 本机机制可以接管，事情可以按预期运行。另一个好处是，它可以用于按钮和超链接。我希望我足够清楚。

小开

我正在寻找在 ASP.NET GridView (命令中的 GridView 控件构建)中的链接按钮上使用它因此，对话框中的“确认”操作需要在运行时激活 Gridview 控件生成的脚本。这招对我很管用:

 $(".DeleteBtnClass").click(function (e) {
e.preventDefault();
var inlineFunction = $(this).attr("href") + ";";
$("#dialog").dialog({
buttons: {
"Yes": function () {
eval(inlineFunction); // eval() can be harmful!
},
"No": function () {
$(this).dialog("close");
}
}
});
});

小开

注意: 没有足够的代表来评论，但 BineG 的回答完美地解决了由 Homer 和 echo 强调的 ASPX 页面的回发问题。为了表示敬意，这里有一个使用动态对话框的变体。

$('#submit-button').bind('click', function(ev) {
var $btn = $(this);
ev.preventDefault();
$("<div />").html("Are you sure?").dialog({
modal: true,
title: "Confirmation",
buttons: [{
text: "Ok",
click: function() {
$btn.trigger("click.confirmed");
$(this).dialog("close");
}
}, {
text: "Cancel",
click: function() {
$(this).dialog("close");
}
}]
}).show();
});

小开

带有一点 javascript 的简单方法

$("#myButton").click(function(event) {
var cont = confirm('Continue?');
if(cont) {
// do stuff here if OK was clicked
return true;
}
// If cancel was clicked button execution will be halted.
event.preventDefault();
}

小开

我知道这是一个老问题，但下面是我在 MVC4中使用 HTML5 数据属性的解决方案:

<div id="dialog" title="Confirmation Required" data-url="@Url.Action("UndoAllPendingChanges", "Home")">
Are you sure about this?
</div>

代码:

$("#dialog").dialog({
modal: true,
autoOpen: false,
buttons: {
"Confirm": function () {
window.location.href = $(this).data('url');
},
"Cancel": function () {
$(this).dialog("close");
}
}
});


$("#TheIdOfMyButton").click(function (e) {
e.preventDefault();
$("#dialog").dialog("open");
});

小开

我自己碰到了这个问题，最终得到了一个解决方案，它与这里的几个答案相似，但实现方式略有不同。我不喜欢 javascript 的很多片段，也不喜欢某个占位符 div。我想要一个通用的解决方案，然后可以在 HTML 中使用，而不需要为每种用法添加 javascript。下面是我想到的(这需要 jquery ui) :

Javascript:

$(function() {


$("a.confirm").button().click(function(e) {


e.preventDefault();


var target = $(this).attr("href");
var content = $(this).attr("title");
var title = $(this).attr("alt");


$('<div>' + content + '</div>'). dialog({
draggable: false,
modal: true,
resizable: false,
width: 'auto',
title: title,
buttons: {
"Confirm": function() {
window.location.href = target;
},
"Cancel": function() {
$(this).dialog("close");
}
}
});


});


});

然后在 HTML 中，不需要 javascript 调用或引用:

<a href="http://www.google.com/"
class="confirm"
alt="Confirm test"
title="Are you sure?">Test</a>

由于 title 属性用于 div 内容，用户甚至可以通过将鼠标悬停在按钮上获得确认问题(这就是为什么我没有使用瓦片的 title 属性)。确认窗口的标题是 alt 标记的内容。Javascript 代码片段可以包含在一个通用的。Js include，通过简单地应用一个类，您就有了一个很好的确认窗口。

小开

上面的另一个变体，它检查控件是“ asp: linkButton”还是“ asp: button”，它呈现为两个不同的 html 控件。似乎对我很有效，但还没有进行广泛的测试。

        $(document).on("click", ".confirm", function (e) {
e.preventDefault();
var btn = $(this);
$("#dialog").dialog('option', 'buttons', {
"Confirm": function () {
if (btn.is("input")) {
var name = btn.attr("name");
__doPostBack(name, '')
}
else {
var href = btn.attr("href");
window.location.href = href;
}
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
});


$("#dialog").dialog("open");
});

小开

我知道这个问题已经很老了，但这是我第一次使用确认对话框。我认为这是最简单的方法。

$(element).onClick(function(){ // This can be a function or whatever, this is just a trigger
var conBox = confirm("Are you sure ?");
if(conBox){
// Do what you have to do
}
else
return;
});

希望你喜欢

小开

我个人认为，在许多 ASP.Net MVC 应用程序的许多视图中，这是一个反复出现的需求。

这就是为什么我定义了一个模型类和一个部分视图:

using Resources;


namespace YourNamespace.Models
{
public class SyConfirmationDialogModel
{
public SyConfirmationDialogModel()
{
this.DialogId = "dlgconfirm";
this.DialogTitle = Global.LblTitleConfirm;
this.UrlAttribute = "href";
this.ButtonConfirmText = Global.LblButtonConfirm;
this.ButtonCancelText = Global.LblButtonCancel;
}


public string DialogId { get; set; }
public string DialogTitle { get; set; }
public string DialogMessage { get; set; }
public string JQueryClickSelector { get; set; }
public string UrlAttribute { get; set; }
public string ButtonConfirmText { get; set; }
public string ButtonCancelText { get; set; }
}
}

我的部分观点是:

@using YourNamespace.Models;


@model SyConfirmationDialogModel


<div id="@Model.DialogId" title="@Model.DialogTitle">
@Model.DialogMessage
</div>


<script type="text/javascript">
$(function() {
$("#@Model.DialogId").dialog({
autoOpen: false,
modal: true
});


$("@Model.JQueryClickSelector").click(function (e) {
e.preventDefault();
var sTargetUrl = $(this).attr("@Model.UrlAttribute");


$("#@Model.DialogId").dialog({
buttons: {
"@Model.ButtonConfirmText": function () {
window.location.href = sTargetUrl;
},
"@Model.ButtonCancelText": function () {
$(this).dialog("close");
}
}
});


$("#@Model.DialogId").dialog("open");
});
});
</script>

然后，每次在视图中需要它时，只需使用@Html。部分(在节脚本中这样做，以便定义 JQuery) :

@Html.Partial("_ConfirmationDialog", new SyConfirmationDialogModel() { DialogMessage = Global.LblConfirmDelete, JQueryClickSelector ="a[class=SyLinkDelete]"})

诀窍是指定与需要确认对话框的元素匹配的 JQueryClickSelector。在我的例子中，所有锚都带有类 SyLinkDelete，但它可以是一个标识符，一个不同的类等等。对我来说，这是一份清单:

<a title="Delete" class="SyLinkDelete" href="/UserDefinedList/DeleteEntry?Params">
<img class="SyImageDelete" alt="Delete" src="/Images/DeleteHS.png" border="0">
</a>

小开

非常流行的主题和谷歌发现这为“ jquery 对话框关闭哪个事件被点击”查询。我的解决方案正确地处理 YES，NO，ESC _ KEY，X 事件。我希望我的回调函数被调用，无论对话框是如何处置的。

function dialog_YES_NO(sTitle, txt, fn) {
$("#dialog-main").dialog({
title: sTitle,
resizable: true,
//height:140,
modal: true,
open: function() { $(this).data("retval", false); $(this).text(txt); },
close: function(evt) {
var arg1 = $(this).data("retval")==true;
setTimeout(function() { fn(arg1); }, 30);
},
buttons: {
"Yes": function() { $(this).data("retval", true); $(this).dialog("close"); },
"No": function()  { $(this).data("retval", false); $(this).dialog("close"); }
}
});
}
- - - -
dialog_YES_NO("Confirm Delete", "Delete xyz item?", function(status) {
alert("Dialog retval is " + status);
});

很容易将浏览器重定向到一个新的 url 或者在函数 retval 上执行其他操作。

小开

这里有很多好的答案;) 这是我的方法，类似于 eval ()的用法。

function functionExecutor(functionName, args){
functionName.apply(this, args);
}


function showConfirmationDialog(html, functionYes, fYesArgs){
$('#dialog').html(html);
$('#dialog').dialog({
buttons : [
{
text:'YES',
click: function(){
functionExecutor(functionYes, fYesArgs);
$(this).dialog("close");
},
class:'green'
},
{
text:'CANCEL',
click: function() {
$(this).dialog("close");
},
class:'red'
}
]
});
}

用法是这样的:

function myTestYesFunction(arg1, arg2){
alert("You clicked YES:"+arg1+arg2);
}


function toDoOrNotToDo(){
showConfirmationDialog("Dialog text", myTestYesFunction, ['My arg 1','My arg 2']);
}

小开

开箱即用的 JQuery UI 提供了这种解决方案:

$( function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
} );

超文本标示语言

<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
</span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

通过为 JQuery 函数提供一个名称并传递希望显示为参数的文本/标题，可以进一步对其进行定制。

参考资料: https://jqueryui.com/dialog/#modal-confirmation

小开

<input type="button" value="Delete" onclick="Delete(@item.id)" / >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
function Delete(id) {
if (confirm("Are you sure ?") == true) {
$.get("/Stud/StudDelete", {
id: id
}, function(res) {
if (res) {
location.reload();
}
});
}
}
</script>