Пользовательский интерфейс jQuery: Показать диалоговое окно, которое пользователь должен подтвердить или отменить

У меня есть несколько ссылок на моем сайте, которые должны отображать модальное диалоговое окно, когда пользователь нажимает на одну из них. Модальное окно будет содержать сообщение вроде: 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, встроенного в страницу! Кроме того, как мне получить первую кнопку, чтобы отправить их в исходное место назначения?

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


jquery-ui jquery-ui-dialog
person Cameron    schedule 02.08.2011    source источник
comment
Как мне получить диалоговое окно, позволяющее пользователю принять и быть отправленным на исходный URL-адрес или отменить и остаться там, где они есть.   -  person Cameron    schedule 02.08.2011
comment
отменить легко, так как вы можете просто определить это в модальном окне. Переходя к URL-адресу, вы также определяете это, но вы должны использовать что-то вроде window.location или location.href.   -  person Matt    schedule 02.08.2011

Ответы (3)


arrow_upward
6
arrow_downward

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

person Manikandan Thangaraj    schedule 02.08.2011

arrow_upward
0
arrow_downward

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

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

person Manikandan Thangaraj    schedule 02.08.2011
comment
Привет, да, я посмотрел на это. Но как сделать так, чтобы подтверждение отправляло пользователя по исходной ссылке или оно обрабатывает это по умолчанию? Также я не хочу иметь разметку на странице, я бы предпочел сделать все это в сценарии, поскольку это не содержимое страницы. Ваше здоровье - person Cameron; 02.08.2011
comment
Попробуйте это stackoverflow.com/questions/2842477/ - person Manikandan Thangaraj; 02.08.2011

arrow_upward
0
arrow_downward

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

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

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

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

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

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

Диалоговое окно jQuery UI, загружаемое в стиле AJAX Вкладки пользовательского интерфейса jQuery

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

$("<div>");

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

$('a.ajax')

person Matt    schedule 02.08.2011