2009-05-20 171 views
141

我尝试使用JQuery UI对话框来替换丑陋的javascript:alert()框。 在我的场景中,我有一个项目列表,并在他们每个人旁边,我会为他们每个人都有一个“删除”按钮。 的伪HTML设置将东西如下:如何在Jquery UI对话框中实现“确认”对话框?

<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部分,在文件准备好了,我会先设定的股利是必要的按钮,一个模式对话框,并设置这些“一”被烧成之前确认删除,如:

$("ul li a").click(function() { 
    // Show the dialog  
    return false; // to prevent the browser actually following the links! 
} 

OK,这里的问题。在初始化期间,对话框将不知道谁(物品)会将其启动,还有物品ID(!)。我如何设置这些确认按钮的行为,如果用户仍然选择是,它会按照链接将其删除?

+0

有一个易于使用的插件在这里做到这一点:http://stackoverflow.com/questions/6457750/form-confirm-before-submit – 2012-09-27 11:36:46

+1

一长串搜索解决方案: http://stackoverflow.com/a/18474005/1876355 – Pierre 2013-08-27 20:02:39

回答

158

我只是要解决同样的问题。实现此功能的关键是,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类似的答案,当时也没有被接受的答案。

+2

+1几乎可以工作......但是看到@lloydphillips的更正答案 – rohancragg 2010-02-18 12:59:50

+0

有没有其他人注意到这会在UpdatePanel中造成一个完整的PostBack?你如何解决这个问题? – Homer 2011-12-21 18:34:21

+3

这个答案和@lloydphillips的答案只是不完全适合我,原始问题是参考“删除”按钮(链接)。一般来说,使用链接(HTTP GET)是不可取的(如DELETE),这两个答案都假设用户已经启用了javascript,如果javascript被禁用,链接将会触发,delete(或其他任何操作)会在没有确认的情况下触发,这可能是灾难性的。我希望找到一个解决这个问题的答案 – echo 2012-08-05 02:49:01

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'); 
}); 
+0

感谢您的回复。我相信我会测试它(但它看起来功能)。我从这里的许多答案中看到的一个问题是缺乏一般性。如果页面有另一组需要确认的控件(或链接等),似乎我们需要多次声明交互/操作。 旧的JavaScript方式,即,href =“javascript:confirm('link_url');”简洁大方,适合所有类似案例。当然,JavaScript方法太过于模糊,人们无法使用JavaScript将完全错过链接。 再次thx为伟大的答复。 – xandy 2009-05-20 11:33:28

+0

+1:不错的创新。太伤心它不是不显眼的:( – naveen 2011-08-04 11:27:31

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; 
}); 

我已经在这个网站进行了测试:

<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元素,你可以在需要进行修改。

58

我发现答案保罗并没有像他设置选项后的方式那样工作,对话框在click事件上实例化后是不正确的。这是我工作的代码。我没有量身定制它,以配合保罗的榜样,但它只是猫的胡须在一些元素方面的差异命名不同。你应该能够解决它。更正位于click事件按钮的对话框选项的设置器中。

$(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"); 

    }); 

}); 

希望这可以帮助别人,因为这篇文章最初让我走上了正确的轨道我认为我最好发布更正。

3

如上。以前的帖子让我走上了正轨。这是我做到的。 这个想法是在表中的每一行旁边都有一个图像(由数据库中的PHP脚本生成)。单击图像时,用户将被重定向到URL,结果,相应的记录将从数据库中删除,同时显示与jQuery UI对话框中单击记录相关的一些数据。

的JavaScript代码:

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

function confirmDelete(username, id) { 
    var delUrl = "https://stackoverflow.com/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 id="confirmDelete" title="Delete User?"></div> 

图片链接:

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

这样你就可以越过PHP的循环值到对话框。 唯一的缺点是使用GET方法来实际执行操作。

2

(截至2016年3月22日,链接到页面的下载无效。我将链接留在这里以防开发者在某些时候修复它,因为它是一个很棒的小插件。一个替代方案和一个实际工作的链接:jquery.confirm。)

这可能对你的需求太简单了,但你可以试试这个jQuery confirm plugin。在很多情况下,使用起来非常简单,并且可以完成这项工作。

-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;">&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

6

简单和短期的解决方案,我只是想和它的工作原理

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

然后,只需将class =“confirm”添加到您的链接,它的工作原理!

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> 
26

我创建了一个我自己的函数,用于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' 
); 

下去。

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; 
     }); 
6

这是我的解决方案..我希望它可以帮助任何人。这是写在飞行而不是copypasted,所以原谅我的任何错误。

$("#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"); 
    } 
}); 

个人而言,我更喜欢这种解决方案:)

编辑:对不起..我真的shouldve更详细地说明它。我喜欢它,因为在我看来它是一个优雅的解决方案。 当用户点击需要首先确认的按钮时,事件被取消,因为它必须是。 单击确认按钮时,解决方案不是模拟链接点击,而是触发原始按钮时触发相同的原生jQuery事件(单击),如果没有确认对话框,将触发原始按钮。唯一的区别是不同的事件名称空间(在这种情况下“已确认”),以便确认对话框不再显示。然后Jquery本地机制可以接管,事情可以按预期运行。 另一个优点是它可以用于按钮和超链接。我希望我很清楚。

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"); 
      } 
     } 
    }); 
}); 
0

注:没有足够的代表处发表评论,但BineG的回答完全在解决与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(); 
}); 
0

与触摸的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(); 
} 
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"); 
}); 
1

我自己遇到了这个问题,最终得到了一个解决方案,这与这里的几个答案类似,但实现方式稍有不同。我不喜欢很多javascript,或者某个地方的占位符div。我想要一个通用的解决方案,然后可以在HTML中使用,而无需为每次使用添加JavaScript。以下是我想出了(这需要jQuery用户界面):

的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> 

自题属性用于div内容,用户甚至可以通过将鼠标悬停在按钮上来获得确认问题(这就是为什么我没有使用tile的title属性)。确认窗口的标题是alt标签的内容。 javascript snip可以包含在广义的.js include中,并且只需应用一个你有一个漂亮的确认窗口的类。

0

上面的另一种变体,它检查控件是否是呈现为两个不同的html控件的'asp:linkbutton'或'asp:button'。似乎工作对我来说很好,但还没有广泛测试。

 $(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"); 
     }); 
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; 
}); 

我希望你喜欢它:)

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]"}) 

诀窍是指定JQu与需要确认对话框的元素相匹配的eryClickSelector。在我的情况下,与类SyLinkDelete所有锚,但它可能是一个标识符,不同类等对我来说是一个列表:

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

非常热门的话题和谷歌认为这对“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上执行其他操作。

0

这里有很多很好的答案;) 这是我的方法。与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']); 
} 
0

开箱JQuery用户界面中提供了这样的解决方案:

$(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> 

您可以进一步自定义此通过提供JQuer的名称y函数并将您想要显示的文本/标题作为参数传递。

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