JQuery UI: Показать диалог, который пользователь должен подтвердить или отменить - PullRequest
Новая
       3

JQuery UI: Показать диалог, который пользователь должен подтвердить или отменить

0 голосов
/ 02 августа 2011

У меня есть несколько ссылок на моем сайте, которые должны показывать модальное диалоговое окно, когда пользователь нажимает на одну из них. Модал будет содержать сообщение вроде: You are now leaving the "SECTION NAME" part of "SITE NAME". Затем пользователь либо примет запрос, который позволит ему продолжить выполнение своего запроса, либо отменит запрос, который будет удерживать пользователя там, где он находится.

Примером ссылки может быть: <a href="/interests" title="My Interests" target="_blank" class="leaving-section">My Interests</a>

Таким образом, как вы можете видеть, класс leaving-section заставит ссылку сделать то, что я указал выше, а также откроет ссылку в новой вкладке / окне, НО пользователь должен сначала принять, что он знает, что переход на другую часть сайта.

Я просмотрел документы, но я не видел примеров, когда а) диалог создается на лету, а не скрывается и показывает div, и б) позволяет пользователю подтвердить его и отправить в исходное местоположение, т.е. URL, по которому они нажали.

Это то, что я имею до сих пор: 

$("#leaving-section").dialog({
            resizable: false,
            modal: true,
            buttons: {
                "I understand, take me there": function () {
                    $(this).dialog("close");
                },
                "I want to stay where I am": function () {
                    $(this).dialog("close");
                }
            }
        });

        $('.leaving-section').click(function (event)
        {
            event.preventDefault();
            var $dialog = $('#leaving-section');
            $dialog.dialog('open');
        });

Но я хочу, чтобы модал создавался с помощью jquery, а не div, встроенный в страницу! Кроме того, как мне получить первую кнопку, чтобы отправить их в исходное место назначения?

Спасибо всем, кто может помочь. Спасибо

Ответы [ 3 ]

6 голосов
/ 02 августа 2011

Мне просто нужно было решить ту же проблему. Ключом к этому было то, что 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");
  });
</script>

<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>

Я считаю, что это сработало бы для вас, если бы вы могли генерировать свои ссылки с помощью класса CSS (confirmLink, в моем примере).

0 голосов
/ 02 августа 2011

Вот пример того, как вы можете это сделать:

http://jsfiddle.net/yFkgR/3/

Или сделать что-то кроме отмены

http://jsfiddle.net/yFkgR/4/

Выможно просто определить свои собственные кнопки.Вы можете стилизовать диалоговое окно так, как вам удобно, я просто использовал значение по умолчанию.

также для использования ajax для загрузки HTML вы можете посмотреть:

jQuery UI Dialog windowзагружается в стиле AJAX. Вкладки jQuery UI

Существует опция открытия, которую можно использовать для загрузки html с удаленной веб-страницы.Я могу создать div, просто сделав

$("<div>");

, он также создаст закрывающий тег.Или, как предлагается в посте, вы также можете использовать

$('a.ajax')

0 голосов
/ 02 августа 2011

Я думаю, что этот плагин может помочь

http://jqueryui.com/demos/dialog/#modal-confirmation

...