Возможно ли модальное окно подтверждения с использованием JQuery? - PullRequest
Новая
       36

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

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 ]

21 голосов
/ 10 июня 2009

Мне просто нужно было решить ту же проблему. Я завелся с помощью виджета 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>
8 голосов
/ 18 мая 2009

Выезд http://www.84bytes.com/2008/06/02/jquery-modal-dialog-boxes/

У них есть множество модальных коробок для JQuery.

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

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

7 голосов
/ 27 мая 2009
6 голосов
/ 25 января 2012

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

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

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

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

2 голосов
/ 19 октября 2012

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

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

2 голосов
/ 27 мая 2009

Вы должны иметь возможность переопределить стандартную функцию 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.
}

Это должно работать, хотя я еще не проверял это. Я собираюсь сделать именно это прямо сейчас и дам вам всем знать, как это работает.

Edit: Я протестировал мой пример выше, и это было невозможно, вам придется передать функцию обратного вызова вашей перезаписанной функции подтверждения, например: 

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

.. вызов вашего функции выглядит следующим образом: 

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

Другими словами, невозможно полностью переопределить стандартную функцию window.confirm, не вызывая неприятного цикла, который вызывает зависание браузера. Я думаю, что вам придется изменить ваши подтверждающие звонки, как указано выше.

1 голос
/ 04 марта 2012

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

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

  • Поместите класс 'valid-action' в любой элемент, требующий подтверждения. 

    confirm-action

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

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

1 голос
/ 21 сентября 2011

Построение поверх решения Banu (спасибо за тонну!), Чтобы сделать его одним популярным решением поверх каждой страницы. Вставьте этот код внутри: 

$(document).ready

И добавьте класс «verifyLinkFollow» ко всем ссылкам, которые вы хотите подтвердить: 

$(".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");
});
1 голос
/ 11 мая 2011

Мне удалось обойти эту проблему, добавив к объекту произвольные данные и проверив эти данные по щелчку. Если она существовала, продолжите работу с этой функцией как обычно, в противном случае подтвердите с помощью «да / нет» (в моем случае, используя оверлей 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();
        }
    });
}
1 голос
/ 18 мая 2009

Поместите перенаправление внутри функции, как: 

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

И назовите это так: 

<a href="javascript:confirmRedirect('somlink.php','Are you sure?')">Go!</a>
Страница:
...