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

我只需要解决同样的问题。我使用dialog中的JQuery UI小部件结束了。我能够在不使用回调的情况下实现这一点，但需要注意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");
  });




  }); // 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 Modal Dialog上看到了jQuery UI site？

的 Modal Confirmation Dialog demo

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

尝试一下，让我知道你的想法。我希望这能解决你的问题。

Answer 5

您应该能够覆盖标准window.confirm功能，编写以下代码。

window.confirm = modalConfirm

然后你需要制作一个这样的函数

function modalConfirm(message){
  // put your code here and bind "return true/false" to the click event
  // of the "Yes/No" buttons.
}

这应该有用，虽然我还没有测试过。我现在要做到这一点，并且会让大家知道它是如何运作的。

编辑：我现在已经测试了上面的例子并且不可能，你必须将回调函数传递给你覆盖的确认函数，如下所示：

function modalConfirm(message, callback){
  ... 
  $("button.yes").click(function(){
     callback(result);
  });
  ...
}

..让你对函数的调用看起来像这样：

confirm("Are you sure?", function(result){
  alert(result);
});

换句话说，不可能完全覆盖默认的window.confirm函数，而不会导致导致浏览器挂起的恶意循环。我认为你必须像上面那样修改你的确认电话。

Answer 6

由于这个问题似乎缺少规范的答案：无法以编程方式暂停（和恢复）javascript执行，例如alert或confirm执行。

话虽如此，依赖于今天的这种行为通常被认为是错误的做法，因为javascript的单线程性质，以及上述功能暂停执行的原因可能是因为它们是在网络还处于早期时设计的阶段，后来保持不变以确保兼容性。由于现在的重点是编写尽可能多的非阻塞js代码，因此以编程方式停止js的功能不太可能适用于任何未来的ECMAScript规范，所以你最好的选择是重新设计你的网站以确保确认和警报对话框可以与在后台运行的其他JavaScript代码共存。

Answer 7

将重定向放在函数中：

<script>
    function confirmRedirect(url, desciption) {
       if (confirmWindow(desciption)) {
           window.location = url;
       }
    }
</script>

并称之为：

<a href="javascript:confirmRedirect('somlink.php','Are you sure?')">Go!</a>

Answer 8

解决这个问题的方法是向对象添加一些任意数据，并在点击时检查该数据。如果它存在，则按正常方式继续操作，否则使用是/否确认（在我的情况下使用jqtools叠加）。如果用户单击“是” - 将数据插入对象中，则模拟另一次单击并擦除数据。如果他们点击否，请关闭叠加层。

以下是我的例子：

$('button').click(function(){
    if ($(this).data('confirmed')) {
        // Do stuff
    } else {
        confirm($(this));
    }
});

这就是我所做的覆盖确认功能（使用jquery工具叠加）：

window.confirm = function(obj){
    $('#dialog').html('\
        <div>\
            <h2>Confirm</h2>\
            <p>Are you sure?</p>\
            <p>\
                <button name="confirm" value="yes" class="facebox-btn close">Yes</button>\
                <button name="confirm" value="no" class="facebox-btn close">No</button>\
            </p>\
        </div>').overlay().load();
    $('button[name=confirm]').click(function(){
        if ($(this).val() == 'yes') {
            $('#dialog').overlay().close();
            obj.data('confirmed', true).click().removeData('confirmed');
        } else {
            $('#dialog').overlay().close();
        }
    });
}

Answer 9

建立在Banu的解决方案之上（非常感谢！），使其成为每个页面顶部的一个流行解决方案。粘贴此代码：

$(document).ready

并将“confirmLinkFollow”类添加到您要确认的所有链接：

$(".confirmLinkFollow").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");
var $dialog_link_follow_confirm = $('<div></div>').
        html("<p>Are you sure?</p>").
        dialog({autoOpen: false,
        title: 'Please Confirm',
        buttons : {
            "Confirm" : function() { 
                window.location.href = targetUrl; 
        },
        "Cancel" : function() { 
                $(this).dialog("close"); 
            }
        },

        modal: true,
    minWidth: 250,
    minHeight: 120
    }
    );


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

Answer 10

我有一个可用于替换默认window.confirm功能的解决方案。它不需要你覆盖window.confirm，因为这是不完全可能的。

我的解决方案允许您拥有像我这样的通用课程，让我们说您在处理之前需要确认的任何元素上的“确认动作”。该脚本非常简单，使用jQuery，jQuery UI Dialog，没有其他插件。

您可以在jsFiddle上找到完整的实现演示，http://jsfiddle.net/74NDD/39/。

用法：

在您的html头中或任何其他点击之前添加此javascript代码绑定你的javascript。

$("#dialog:ui-dialog").dialog("destroy");

$('.confirm-action').live('click', function(e) {
    $self = $(this);

    if (e && e.stopImmediatePropagation && $self.data('confirmed') !== true) {
        e.stopImmediatePropagation();

        $('#confirm-action-dialog').dialog({
            height: 110,
            modal: true,
            resizable: false,
            draggable: false,
            buttons: {
                'Yes': function() {
                    $(this).dialog('close');
                    $self.data('confirmed', true);
                    $self.click();
                },
                'No': function() {
                    $self.data('confirmed', false);
                    $(this).dialog('close');
                }
            }
        });
    } else if ($self.data('confirmed') === true) {
        e = window.event;
        e.cancelBubble = false;
        $self.data('confirmed', false);
    }

    return false;
});

将此html放置在正文中的某个位置（默认情况下隐藏）。

<div style="display:none;" id="confirm-action-dialog" title="Confirm Action?">
    <p>
        <span class="ui-icon ui-icon-alert"></span>
        Are you sure you want to continue?
    </p>
</div>

将类'confirm-action'放在需要确认的任何元素上。
```
confirm-action
```

这个解决方案非常完美，因为它不会改变jQuery事件冒泡，它只会暂停（停止）所有其他事件，直到用户决定他们想要做什么为止。

我希望这对其他人有帮助，因为我无法找到任何其他解决方案，不需要我安装另一个jQuery插件或做其他一些黑客攻击。

Answer 11

以下链接有一个用于确认框的jQuery插件，类似于在JavaScript中构建类似confirm（“something”）

http://labs.abeautifulsite.net/archived/jquery-alerts/demo/

Answer 12

差不多三年后，我正在寻找类似的东西。由于我没有找到一个可接受的“快速”解决方案，我写了一些非常接近OP标准的东西。我认为其他人可能会发现它在未来很有用。

JavaScript是事件驱动的，这意味着它不支持任何类型的“等待”或“休眠”循环，我们可以使用它来暂停纯javascript确认功能。这些选项涉及使用浏览器插件或AJAX来刻录处理器周期。在我们日益移动的世界中，有时候互联网连接不稳定，这些都不是很好的解决方案。这意味着我们必须立即从“确认”功能返回。

但是，由于上面的代码片段中没有“假”逻辑（即，当用户点击“取消”时没有做任何事情），我们可以在用户点击时再次触发“点击”或“提交”事件“好。”为什么不在我们的“确认”功能中设置一个标志并根据该标志做出反应？

对于我的解决方案，我选择使用FastConfirm而不是“模态”对话框。您可以轻松地修改代码以使用您想要的任何内容，但我的示例旨在使用此代码：

https://github.com/pjparra/Fast-Confirm

由于这样做的性质，我没有看到一个干净的方式来打包它。如果您觉得这有太多粗糙的边缘，请随意将它们弄平，或者按照其他人推荐的方式重写代码：

/* This version of $.fn.hasEvent is slightly modified to provide support for
 * the "onclick" or "onsubmit" tag attributes. I chose this because it was
 * short, even if it is cryptic.
 *
 * Learn more about the code by Sven Eisenschmidt, which is licensed under
 * the MIT and GPL at:
 *     http://github.com/fate/jquery-has-event
 */
(function($) {
    $.fn.hasEvent = function(A, F, E) {
        var L = 0;
        var T = typeof A;
        E = E ? E : this;
        var V = (E.attr('on'+A) != undefined);
        A = (T == 'string') ? $.trim(A) : A;
        if (T == 'function')
            F = A, A = null;
        if (F == E)
            delete(F);
        var S = E.data('events');
        for (e in S)
            if (S.hasOwnProperty(e))
                L++;
        if (L < 1)
            return V; // = false;
        if (A && !F) {
            return V = S.hasOwnProperty(A);
        } else if(A && S.hasOwnProperty(A) && F) {
            $.each(S[A], function(i, r) {
                if(V == false && r.handler == F) V = true;
            });
            return V;
        } else if(!A && F) {
            $.each(S, function(i, s) {
                if (V == false) {
                    $.each(s, function(k, r) {
                        if (V == false && r.handler == F)
                            V = true;
                    });
                }
            });
        }
        return V;
    }
    $.extend($, {hasEvent: $.fn.hasEvent});
}) (jQuery);

/* Nearly a drop-in replacement for JavaScript's confirm() dialog.
 * Syntax:
 *   onclick="return jq_confirm(this, 'Are you sure that you want this?', 'right');"
 *
 * NOTE: Do not implement "false" logic when using this function. Find another way.
 */
var jq_confirm_bypass = false;
function jq_confirm(el, question, pos) {
    var override = false;
    var elem = $(el);

    if ($.fn.fastConfirm == undefined) {
        override = confirm(question);
    } else if (!jq_confirm_bypass) {
        if (pos == undefined) {
            pos = 'right';
        }

        elem.fastConfirm({
            position: pos,
            questionText: question,
            onProceed: function(trigger) {
                var elem = $(trigger);
                elem.fastConfirm('close');

                if (elem.hasEvent('click')) {
                    jq_confirm_bypass = true;
                    elem.click();
                    jq_confirm_bypass = false;
                }
                if (elem.hasEvent('submit')) {
                    jq_confirm_bypass = true;
                    elem.submit();
                    jq_confirm_bypass = false;
                }
                // TODO: ???
            },
            onCancel: function(trigger) {
                $(trigger).fastConfirm('close');
            }
        });
    }

    return override ? override : jq_confirm_bypass;
}

所以... onclick =“返回确认（'你想测试吗？'）;”将成为onclick =“返回jq_confirm（这，'你想测试吗？'）;” pos /“right”参数是可选的，专门用于快速确认。

单击时，jq_confirm（）函数将生成jQuery对话框并返回“false”。当用户单击“确定”时，jq_confirm（）会设置一个标志，调用原始的click（或submit）事件，返回“true”，然后取消设置该标志，以防您想要保留在同一页面上。

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

12 个答案: