2011-03-15 2 views
0

이 질문은 How to add a "confirm delete" option in ASP.Net Gridview?을 표시하지만 Jquery Confirm 상자를 사용하여 ASP.Net Gridview에서 "삭제 확인"옵션의 비슷한 동작을 원합니다.ASP.Net에서 JQuery를 사용하는 모달 확인 상자

포스트 백 (postback) 동작과 asp.net 페이지 흐름에 많은 문제가 있습니다.

나는 domething 원하는 간단하게 : 나는 자바 스크립트 OnClick 이벤트를 해고 할 수있는 방법, 또는이 확인 대화 상자로 패널을 넣을 수있는 방법을

<asp:Button ID="ButtonRemove" runat="server" Text="<%$ Resources:Localizacao, BUTTON_REMOVE %>" OnClick="ButtonRemove_Click" OnClientClick="displayConfirmDialog();/> 

어떤 생각?

* 오늘은 ajaxcontroltoolkit을 사용합니다. 그러나이 제품이 더 이상 사용되지 않으므로 좀 더 우아한 대안을 찾으려고합니다.

답변

0

1 - 대화 상자가 될 숨겨진 div가 있습니다. 이것을 기본 페이지 마크 업 외부의 HTML 하단에 놓습니다.

<div id="dialog1" class="dialog" style="display:none"> 
    SOME TEXT 
    <a href="javascript://" onclick="confirmDialog()">CONFIRM</a> 
</div> 

스타일이 너무 좋아 :

.dialog { 
    position:absolute; 
    width:250px; 
    height:250px; 
    background-color:#ffffff 
} 

.dialog a { 
    display:block; 
    padding:5px; 
    margin-top:50px; 
    background-color:#c0c0c0 
} 

2 - 센터를 표시하기 전에 대화 :

centerMe('#dialog1') 

function centerMe(element) { 
    //pass element name to be centered on screen 
    var pWidth = jQuery(window).width(); 
    var pTop = jQuery(window).scrollTop() 
    var eWidth = jQuery(element).width() 
    var height = jQuery(element).height() 
    jQuery(element).css('top', pTop + 100 + 'px') 
    jQuery(element).css('left', parseInt((pWidth/2) - (eWidth/2)) + 'px') 
} 

3 - 대화 보여

jQuery('#dialog1').fadeIn('slow') 

4 - 확인 버튼을 처리하는 기능을 생성하십시오 :

function confirmDialog() { 
    jQuery('#dialog1').hide() 
    ... your code ... 
} 

멋진 배경을 원할 경우 간단한 흰색 배경 대신 대화 상자의 배경 이미지를 만들 수 있습니다.

+0

코드 숨김에서 내 ButtonRemove_click()을 호출하는 방법을 이해할 수 없습니다. – Custodio

+0

대화 상자에 대해 Jquery.Dialog를 선호합니다. 내 파일에 적은 코드 (= – Custodio

관련 문제