JQuery - 앵커 링크에 모달 대화 상자를 표시해야 함 페이지를 클릭하십시오.

Question

내 면도보기에서 앵커가있는 테이블이 있습니다. 아래에 표시된 셀 중 하나 :

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

사용자가 앵커 중 하나를 클릭하면 모달 대화 상자를 표시해야합니다. 이것을 어떻게 할 수 있습니까?

Answer 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', 
     }); 
     } 
    ); 
}); 

어쨌든, 그 시작이야을. 대화 상자에 버튼을 추가 할 수 있으며, 필요에 따라 작업을 수행 할 수 있습니다.

Answer 2

앵커에 id (jQuery 성능)를 지정하고 예를 들어 Ajax를 통해 모달 대화 상자를 가져온 클릭 이벤트를 바인드하여 false를 반환 할 수 있습니다 (JavaScript가 비활성화 된 경우 다른 대화 상자가 나타나야 함) 당신이 뭔가를 한 경우)