是否可以使用JQuery的模态确认框？

Question

看了很多,似乎无法找到一个JQuery解决方案(可能只是JavaScript的限制):

<a href="somelink.php" 
   onclick="return confirm('Go to somelink.php?');">Click Here</a>

在上面的示例中,当用户单击链接时,如果用户在确认框中单击"确定",则只会转到其href.

我想要做的是使用弹出式div获得更现代的外观.也许是这样的:

<a href="somelink.php" 
   onclick="return jq_confirm('Go to somelink.php?');">Click Here</a>

(其中jq_confirm是一个自定义的JQuery确认函数,弹出一个带有YES/NO或OK/CANCEL按钮对的漂亮div).

但是,我似乎找不到任何这样的东西.

我已经查看了一些提供类似功能的JQuery小部件库等,但是没有人会等待用户的响应(至少,不是在上面描述的场景中),而是他们只是继续并将用户带到链接(或者运行嵌入在href =''链接片段中的任何JavaScript.我怀疑这是因为虽然您可以将回调函数附加到许多这些小部件以返回true/false值,但onclick事件不会等待响应(回调是异步的),从而破坏了确认框的目的.

我需要的是默认confirm()命令提供的相同类型的halt-all-javascript(模态)功能.这在JQuery(甚至是JavaScript)中是否可行？

因为我不是JavaScript和JQuery的专家,所以我会向你推荐专家.任何JQuery(甚至是纯JavaScript)解决方案都是受欢迎的(如果可能的话).

谢谢 -

Answer 1

我只需要解决同样的问题.我结束了使用JQuery UI中的dialog小部件.我能够在不使用回调的情况下实现这一点,必须在事件处理程序中为要使用确认功能的链接部分初始化(如果要将其用于多个链接).这是因为必须将链接的目标URL注入事件处理程序以进行确认按钮单击. dialogclick

这是我的解决方案,抽象出来以适合一个例子.我使用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");
  });




  }); // end of $(document).ready


</script>

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

Answer 2

查看http://www.84bytes.com/2008/06/02/jquery-modal-dialog-boxes/

他们有各种各样的JQuery模式框.

我想你应该看到http://www.ericmmartin.com/simplemodal/

JavaScript确认函数的模态对话框覆盖.演示如何使用onShow以及如何显示模式对话框确认,而不是默认的JavaScript确认对话框.

Answer 3

你有没有在jQuery UI网站上看到jQuery Modal Dialog？

• 模态确认对话演示

Answer 4

我在这里写了关于这个问题的解决方案的博客:http://markmintoff.com/2011/03/asp-net-jquery-confirm-dialog/

即使该文章面向ASP.Net,它也可以很容易地适应php.它依赖于防止点击返回false并且当用户点击"OK"或"YES"或者你有什么时; 只需再次点击链接或按钮即可.

var confirmed = false;
function confirmDialog(obj)
{
    if(!confirmed)
    {
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Yes": function()
                {
                    $( this ).dialog( "close" );
                    confirmed = true; obj.click();
                },
                "No": function()
                {
                    $( this ).dialog( "close" );
                }
            }
        });
    }

    return confirmed;
}

试一试,让我知道你的想法.我希望这能解决你的问题.