Возможно ли модальное окно подтверждения с использованием JQuery? - PullRequest
32 голосов
/ 18 мая 2009

Немного огляделся и, похоже, не могу найти решение JQuery ( может быть, это просто ограничение JavaScript ) для этого:

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

В приведенном выше примере, когда пользователь нажимает на ссылку, он перейдет к своему href, только если пользователь нажмет OK в поле подтверждения.

Что я пытаюсь сделать, так это получить более современный вид с помощью всплывающего окна div. Возможно, что-то вроде этого:

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

(где jq_confirm - это пользовательская функция подтверждения JQuery, которая выдает хороший div с парой кнопок YES / NO или OK / CANCEL).

Однако я не могу найти ничего подобного.

Я посмотрел на некоторые библиотеки виджетов JQuery и т. Д., Которые предлагают аналогичную функциональность, но никто не будет ждать ответа от пользователя (по крайней мере, , не в сценарии, описанном выше ), но вместо этого они просто продолжают и перенаправьте пользователя по ссылке ( или запустите любой JavaScript, встроенный в часть ссылки , содержащую href = ''). Я подозреваю, что это потому, что, хотя вы можете прикрепить функцию обратного вызова ко многим из этих виджетов для возврата значения true / false, событие onclick не ожидает ответа ( обратные вызовы асинхронны ), тем самым победив цель окна подтверждения.

Мне нужна та же функциональность halt-all-javascript (модальная), которую предоставляет стандартная команда verify () . Это возможно в JQuery ( или даже в JavaScript )?

Поскольку я не являюсь экспертом ни в JavaScript, ни в JQuery, я полагаюсь на вас, гуру. Любое решение JQuery ( или даже чистый JavaScript ) приветствуется (, если возможно ).

Спасибо -

Ответы [ 12 ]

0 голосов
/ 20 февраля 2012

Почти три года спустя я ищу что-то подобное. Поскольку я не нашел приемлемого «быстрого» решения, я написал что-то, что очень близко соответствует критериям ОП. Я полагаю, что другие могут найти это полезным в будущем.

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 = "return verify ('Вы хотите проверить это?');" стал бы onclick = "return jq_confirm (это, 'Вы хотите проверить это?');" Параметр pos / "right" является необязательным и предназначен специально для быстрого подтверждения.

Когда вы нажимаете, функция jq_confirm () порождает диалоговое окно jQuery и возвращает «false». Когда пользователь нажимает «OK», jq_confirm () устанавливает флаг, вызывает исходное событие click (или submit), возвращает «true», а затем снимает флажок, если вы хотите остаться на той же странице.

0 голосов
/ 03 апреля 2011

В следующей ссылке есть плагин jQuery для блоков подтверждения, аналогичный созданию подтверждения («что-то») в JavaScript

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

...