Является ли модальная строка подтверждения использованием JQuery?

Ответ 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>

Ответ 2

Отъезд http://www.84bytes.com/2008/06/02/jquery-modal-dialog-boxes/

У них очень много модальных ящиков для JQuery.

Я думаю, вы должны увидеть http://www.ericmmartin.com/simplemodal/

Модальное диалоговое переопределение функции подтверждения JavaScript. Демонстрирует использование onShow, а также как отображать подтверждение модального диалога вместо диалогового окна подтверждения JavaScript по умолчанию.

Ответ 3

Вы видели jQuery Modal Dialog на jQuery UI site?

• Демо-версия демонстрации модального подтверждения

Ответ 4

Я рассказал о решении этой проблемы здесь: http://markmintoff.com/2011/03/asp-net-jquery-confirm-dialog/

Несмотря на то, что статья ориентирована на ASP.Net, ее можно легко адаптировать к php. Он полагается на предотвращение щелчка с возвратом false и когда пользователь нажимает "ОК" или "ДА" или "что есть"; ссылка или кнопка просто снова нажата.

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

Попробуйте и дайте мне знать, что вы думаете. Я надеюсь, что это решает вашу проблему.

Ответ 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 по умолчанию, не вызывая неприятный цикл, который заставляет браузер зависать. Я думаю, что вам придется изменить свои подтверждающие звонки, как указано выше.

Ответ 6

Поскольку этот вопрос, кажется, не содержит канонического ответа: нет возможности программно приостановить (и возобновить) выполнение javascript, например alert или confirm do.

Таким образом, полагаясь на это поведение сегодня, как правило, считается плохой практикой, учитывая однопоточный характер javascript, и причина, по которой вышеупомянутые функции делают приостановку исполнения, вероятно, потому, что они были разработаны, когда сеть все еще находилась на очень раннем этапе а затем оставлены без изменений, чтобы обеспечить совместимость. Поскольку в настоящее время основное внимание уделяется написанию как можно большего количества неблокирующего js-кода, маловероятно, что функциональность программно останавливать js когда-либо будет соответствовать любой будущей спецификации ECMAScript, поэтому лучше всего переделать свой сайт, чтобы убедиться в подтверждении и диалоговые окна предупреждений могут сосуществовать с другим кодом javascript, работающим в фоновом режиме.

Ответ 7

Поместите перенаправление внутри функции следующим образом:

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

И назовите его следующим образом:

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

Ответ 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();
        }
    });
}

Ответ 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");
});

Ответ 10

У меня есть решение, которое можно использовать для замены функции window.confirm по умолчанию. Это не требует от вас переопределения window.confirm, поскольку это невозможно.

Мое решение позволяет вам иметь такой класс, как я, допустим "подтверждение-действие", которое вы размещаете на любом элементе, который требует подтверждения перед обработкой. script очень прост и использует jQuery, jQuery UI Dialog и другие плагины.

Вы можете найти полную демонстрацию реализации на jsFiddle, http://jsfiddle.net/74NDD/39/.

Использование:

• Добавьте этот код javascript в свой html-заголовок или перед любым другим кликом привязка, которую вы имеете в своем 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

Это решение отлично работает, так как оно не изменяет jQuery-событие, оно просто приостанавливает (останавливает) все другие события, пока пользователь не решит, что они хотят делать.

Я надеюсь, что это поможет кому-то еще, поскольку мне не удалось найти какое-либо другое решение, которое не требует установки другого плагина jQuery или другого взлома.

Ответ 11

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

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

Ответ 12

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

JavaScript управляется событиями, и это означает, что он не поддерживает какой-либо цикл "ожидания" или "сна", который мы можем использовать для приостановки функции подтверждения чистого javascript. Параметры включают в себя цикл циклов обработки, с использованием плагина браузера или AJAX. В нашем все более мобильном мире и с иногда пятнистыми интернет-соединениями ни один из них не является отличным решением. Это означает, что мы должны немедленно вернуться из нашей функции "подтвердить".

Однако, поскольку в фрагменте кода выше нет "ложной" логики (т.е. ничего не делается, когда пользователь нажимает "Отмена" ), мы можем запускать событие "click" или "отправить" еще раз, когда пользователь нажимает "ОК." Почему бы не установить флаг и не реагировать на этот флаг в нашей функции "подтвердить"?

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

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