jQuery — нужно показывать модальный диалог при любом щелчке по ссылке привязки на странице

#jquery #asp.net-mvc-3 #jquery-ui

#jquery #asp.net-mvc-3 #jquery-пользовательский интерфейс

Вопрос:

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

 @foreach (MillitarySlot slot in item.SundaySlots)
                { 
                    <a style="color:@slot.Color" title="@slot.ToolTip" href="@slot.HRef">@slot.SlotText</a><br />
                }
  

Если пользователь нажимает на любую привязку, мне нужно показать модальный диалог. Как я могу этого добиться?

Ответ №1:

Итак, если вы сделали что-то подобное:

 $('a').click(function(e) {
   alert('anchor clicked');
}); 
  

вы получите это предупреждение при каждом нажатии на привязку на странице — вряд ли это то, что вы хотите. Если вы назначили этим якорям класс, то вы могли бы сделать это:

 $('a.myclass').click(function(e) {
   alert('anchor clicked');
}); 
  

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

 $('a.myclass).click(function () {
   // add the div or reuse it
   var modaldialog = ($('#ModalDialog').length > 0)
     ? $('#ModalDialog')
     : $('<div id="ModalDialog" style="display:hidden"></div>').appendTo('body');
   load up data via ajax call
   $.get('@Url.Action("MyAction", "MyController")', {},
      function (responseText, textStatus, XMLHttpRequest) {
         modaldialog.html(responseText);
         modaldialog.dialog({
            modal: true,
            width: 500,
            title: 'My Modal Dialog',
         });
      }
   );
});
  

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

Комментарии:

1. Спасибо за ответ. На самом деле совокупность вещей, которые я изменил в своем коде. 1. каким-то образом класс не работал должным образом, поэтому я прикрепляю к событию ready () с помощью «any a в table.tr » 2. И поскольку у меня было строго типизированное представление, я вызываю функцию dialog() в конце тела, следовательно, во время показа диалога весь div готов к рендерингу.

Ответ №2:

Вы могли бы присвоить этому якорю идентификатор (для производительности jQuery) и привязать событие click, которое, например, вызывает модальный диалог через Ajax, и после этого возвращает false (если у пользователя отключен JavaScript, он должен продолжить, иначе появится диалоговое окно)

Комментарии:

1. Спасибо за ответ, но у меня нет никакого контроля над созданием тега привязки, поскольку они создаются из списка. Следовательно, мне пришлось применить $(‘.scheduleTable table tr a’).live(‘click’ ….