是否可以使用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小部件結束了。 我能夠在不使用回調的情況下實現這一點，並且必須在click事件處理程序中為要使用確認功能的鏈接部分初始化dialog （如果要將其用於多個鏈接）。 這是因為必須將鏈接的目標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 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;
}

試一試，讓我知道你的想法。 我希望這能解決你的問題。

Answer 5

由於這個問題似乎缺少規范的答案： 沒有辦法以編程方式暫停（和恢復）javascript執行，如alert或confirm 。

話雖如此，今天依賴於這種行為通常被認為是不好的做法，因為javascript的單線程性質，以及上述功能暫停執行的原因可能是因為它們是在網絡還處於早期階段時設計的，並且后來保持不變以確保兼容性。 由於現在的重點是編寫盡可能多的非阻塞js代碼，因此以編程方式停止js的功能不太可能適用於任何未來的ECMAScript規范，所以你最好的選擇是重新設計你的網站以確保確認和警報對話框可以與在后台運行的其他JavaScript代碼共存。

Answer 6

您應該能夠覆蓋標准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 7

我解決這個問題的方法是向對象添加一些任意數據，並在點擊時檢查該數據。 如果它存在，則按正常方式繼續操作，否則使用是/否確認（在我的情況下使用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 8

建立在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 9

將重定向放在函數內部，如：

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

並稱之為：

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

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放置在正文中的某個位置（默認情況下隱藏）。

  \n <div style =“display：none;”  id =“confirm-action-dialog”title =“確認行動？”>\n     <P>\n         <span class =“ui-icon ui-icon-alert”> </ span>\n         你確定你要繼續嗎？\n     </ p>\n </ DIV>\n

• 將類'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（）會設置一個標志，調用原始的單擊（或提交）事件，返回“true”，然后取消設置標志，以防您想要保留在同一頁面上。