我尝试使用JQuery UI Dialog来替换丑陋的javascript:alert()
框。
在我的场景中,我有一个项目列表,并且在每个项目的旁边,我会为每个项目都有一个“删除”按钮。
psuedo html设置将是以下内容:
<ul>
<li>ITEM <a href="url/to/remove"> <span>$itemId</span>
<li>ITEM <a href="url/to/remove"><span>$itemId</span>
<li>ITEM <a href="url/to/remove"><span>$itemId</span>
</ul>
<div id="confirmDialog">Are you sure?</div>
在JQ部分,在文档准备好之后,我首先将div设置为带有必要按钮的模态对话框,并在删除之前将那些“a”设置为触发确认,如:
$("ul li a").click(function() {
// Show the dialog
return false; // to prevent the browser actually following the links!
}
好的,这是问题所在。在初始化时,对话框将不知道谁(项目)将启动它,以及项目ID(!)。如何设置这些确认按钮的行为,如果用户仍然选择是,它将按照链接删除它?
答案 0 :(得分:164)
我只需要解决同样的问题。实现此功能的关键是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,其中包含代码。
为了充分披露,我会注意到我花了几分钟时间解决这个问题,我提供了this question的类似答案,当时也没有接受答案。
答案 1 :(得分:59)
我发现保罗的答案并不完全正常,因为在点击事件实例化对话框后,他设置选项的方式不正确。这是我的代码正在运行。我没有根据保罗的例子来定制它,但它只是猫的胡须在一些元素方面的不同命名。你应该能够解决它。更正位于单击事件按钮的对话框选项的设置器中。
$(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");
});
});
希望这有助于其他人,因为这篇文章最初让我走上了正确的轨道我认为我最好发布更正。
答案 2 :(得分:27)
我为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'
);
继续。
答案 3 :(得分:6)
这是我的解决方案..我希望它可以帮助任何人。它是在飞行中写的,而不是复制的,所以请原谅我的任何错误。
$("#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本机机制可以接管并且事情可以按预期运行。 另一个优点是它可以用于按钮和超链接。我希望我很清楚。
答案 4 :(得分:6)
我刚试过的简单而简短的解决方案
$('.confirm').click(function() {
$(this).removeClass('confirm');
$(this).text("Sure?");
$(this).unbind();
return false;
});
然后只需将class =“confirm”添加到您的链接中就可以了!
答案 5 :(得分:4)
我知道这是一个老问题,但这是我在MVC4中使用HTML5 data attributes的解决方案:
<div id="dialog" title="Confirmation Required" data-url="@Url.Action("UndoAllPendingChanges", "Home")">
Are you sure about this?
</div>
JS代码:
$("#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");
});
答案 6 :(得分:3)
这会吗?
$("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');
});
答案 7 :(得分:3)
如上所述。之前的帖子让我走上正轨。这就是我做到的。 我们的想法是在表格的每一行旁边放一个图像(由PHP脚本从数据库生成)。单击图像时,用户将被重定向到URL,因此,在jQuery UI对话框中显示与单击记录相关的一些数据时,将从数据库中删除相应的记录。
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');
}
Dialog div:
<div id="confirmDelete" title="Delete User?"></div>
图片链接:
<img src="img/delete.png" alt="Delete User" onclick="confirmDelete('<?=$username;?>','<?=$id;?>');"/>
这样您就可以将PHP循环值传递到对话框中。 唯一的缺点是使用GET方法来实际执行操作。
答案 8 :(得分:2)
这个怎么样:
$("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元素,您可以根据需要进行调整。
答案 9 :(得分:2)
(截至2016年3月22日,链接到页面上的下载不起作用。我在这里留下链接以防开发人员在某些时候修复它,因为它是一个很棒的小插件。原帖如下:替代方案和实际有效的链接:jquery.confirm。)
这可能对您的需求来说太简单了,但您可以尝试这个jQuery confirm plugin。它使用起来非常简单,并且在很多情况下都可以完成工作。
答案 10 :(得分:1)
尽管我讨厌使用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>
答案 11 :(得分:1)
我自己遇到了这个并最终得到了一个解决方案,这与这里的几个答案类似,但执行方式略有不同。我不喜欢很多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内容,用户甚至可以通过将鼠标悬停在按钮上来获得确认问题(这就是为什么我没有使用tile的title属性)。确认窗口的标题是alt标记的内容。 javascript片段可以包含在通用的.js包含中,只需应用一个类,你就有了一个漂亮的确认窗口。
答案 12 :(得分:0)
$("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;
});
答案 13 :(得分:0)
我一直在寻找这个用于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");
}
}
});
});
答案 14 :(得分:0)
注意:没有足够的回复评论,但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();
});
答案 15 :(得分:0)
上面的另一个变体,它检查控件是'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");
});
答案 16 :(得分:0)
我知道这个问题很老但这是我第一次使用确认对话框。我认为这是最简单的方法。
$(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;
});
我希望你喜欢它:)。
答案 17 :(得分:0)
我个人认为这是许多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.Partial(在部分脚本中执行它以便定义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>
答案 18 :(得分:0)
非常热门的话题和谷歌发现这个&#34; jquery对话框关闭哪个事件被点击了&#34;查询。我的解决方案正确处理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);
});
将浏览器重定向到新网址或在功能转发时执行其他操作很容易。
答案 19 :(得分:0)
开箱即用的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" );
}
}
});
} );
HTML
<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函数的名称并将您想要显示的文本/标题作为参数传递来进一步自定义。
答案 20 :(得分:-1)
这就是你问题的答案......
<!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;"> 298 </font><font style="font-family:Arial;font-size:20px;font-style:bold;background-color:red;color:yellow;">dsadas sadsadas </font> </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> </td><td> </td></TR><TR align="center"><TD>12/22/2010 </TD><TD>298 </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 </TD><TD>298 </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
答案 21 :(得分:-1)
轻松使用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();
}
答案 22 :(得分:-2)
<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>