WebForms, AJAX 및 프롬프트 팝업이 우아하게

Question

나는 웹 페이지가 이미 많은 수의 updatePanels, 버튼 및 통합 기능으로 개발되어 있습니다.
몇 가지 확인 메시지를 추가해야하며 이러한 프롬프트는 사용자 지정해야하며 '계속', '취소'와 같은 옵션이 있어야합니다.
가능한 시나리오는 다음과 같습니다.

• 사용자가 텍스트 상자에 내용을 쓰고 제출 단추를 클릭합니다.
• 프롬프트가 나타납니다.
• 사용자가 계속을 클릭하면 페이지가 정상적인 흐름을 계속해야하며 취소를 누르면 제출 작업이 중지되어야합니다.

나는 덜 눈에 거슬리는 일이되고 싶다. 이것을 달성하는 최선의 방법은 무엇인가?

편집 : 나는 JQuery와 같은 어떤 라이브러리를 사용할 수 없습니다

. ModalPopupExtenders를 사용하거나 단순히 div 스타일을 사용할 수 있습니다.
근본적으로 문제는이 submit 버튼을 클릭하면 submclick 이벤트에 JS 함수를 추가하더라도 제출 작업이 수행되고 팝업이 표시되지 않는다는 것입니다.
ClearAll이 버튼 핸들러를 제출하고 내 팝업을 표시하는 버튼을 추가 할 수 있지만 팝업의 '계속'버튼을 클릭하면 어떻게 '제출'작업을 계속할 수 있습니까?

Answer 1

편집 : 업데이트하여 응답 질문한다 : (a dom0에 또는 jQuery를 처리기를 사용하는 경우)

• 는 폼의 submit 이벤트를 후크 팝업을 트리거하고 false를 반환 최신 핸들러를 사용하는 경우 preventDefault으로 전화하십시오.
• 양식을 실제로 제출할 준비가되면 양식의 submit 함수를 호출하십시오. 이 준수 브라우저에 submit 이벤트를 트리거 (하지만 분명히, 모든 대상 브라우저로 테스트)하지 않는

원래 답 :

Zoidberg은에서 특정 구현 (좋은 하나 지적하고있다

무엇 나는 들었다). 여러 가지가 있습니다.

일반적인 원칙은 다음과 같이 작동

• 만들기 모든 페이지의 내용의 커버 iframe를 절대 위치; 당신이 원할 경우 iframe에 불투명도를 사용하여 다룰 수있는 모든 것을 회색으로 처리 할 수 ​​있습니다. iframe에는 콘텐츠가 없어도 배경 화면 만 있습니다. 이것은 보통 "iframe shim"트릭이라고합니다. iframe에 Z- 색인을 페이지의 다른 요소보다 높게 지정하십시오.
• 대화 상자가있는 iframe (맨 위가 더 높음) 상단에 사용자가 가지고있는 옵션 인 div을 작성하십시오. 이것은 iframe의 문서 안에 없으며 메인 페이지의 DOM에 포함되어 있습니다.
• 사용자가 옵션을 선택하면 div 및 iframe을 제거하고 다른 작업 (다른 페이지로 이동, 업데이트 등)을 수행하십시오.

는 iframe 적어도 목적의 몇 가지 역할 : 그것은 당신이 쉽게 회색 아웃 기본 내용을 수 있습니다

• 을
• 은 마우스 클릭 먹는
그것은에 양식 필드에 문제를 다루는
• Internet Explorer

편집 : 기록을 위해 대부분의 JavaScript UI 툴킷은 이러한 종류의 "모달" jQuery UI, YUI, Dojo, Glow 등의 기능을 제공합니다.

Answer 2

YUI에는 멋진 대화 상자가 있습니다.

http://developer.yahoo.com/yui/examples/container/simpledialog-quickstart.html

그들은 심지어 그냥이 로딩 패널

http://developer.yahoo.com/yui/examples/container/panel-loading.html

Answer 3

당신은 jQuery를 UI/w 잘못 갈 수 없어처럼 모달로 만들 수 있습니다. 그들은 모달 대화 상자 위젯을 가지고 있습니다.

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

Answer 4

버튼의 OnClientClick 이벤트에 다음과 같은 내용을 추가하는 것은 어떻습니까?

OnClientClick = "javascript: return confirm('Your message here.');"