jQuery 기반 팝 업 경고 대화 상자 미화 플러그 인(경고,확인,알림)

얼마 전 공식 홈 페이지 에서 이 플러그 인 을 보 았 기 때문에 오늘 틈 틈 이 보 았 습 니 다.마음대로 공유 해 드 리 겠 습 니 다.아마 당신 은 이미 알 고 있 었 을 것 입 니 다.만약 그렇다면 뛰 어 넘 고 벽돌 을 치지 마 세 요.이 Jquery 플러그 인의 목적 은 JavaScript 의 표준 함수 alert(),confirm(),prompt()를 대체 하 는 것 입 니 다.이 플러그 인 은 다음 과 같은 특징 이 있 습 니 다.1:이 플러그 인 은 자신의 css 제정 을 지원 할 수 있 습 니 다.당신 의 사 이 트 를 더욱 전문 적 으로 보이 게 하 세 요.2:대화 상자 의 제목 을 사용자 정의 할 수 있 습 니 다.3:IE7 에 서 는 자 바스 크 립 트 의 prompt()함수 로 가 져 온 페이지 를 다시 불 러 오 는 것 을 피 할 수 있 습 니 다.4:이 방법 들 은 모두 윈도 의 모드 대화 상 자 를 모 의 했다.브 라 우 저 창 크기 를 바 꿀 때 사용자 창의 조정 에 적응 할 수 있 습 니 다.5:jQuery UI Draggable plugin 플러그 인 을 도입 하면 이 플러그 인도 자 유 롭 게 끌 릴 수 있 습 니 다.필요 한 사람 이 다운로드 할 수 있 도록 플러그 인의 다운로드 주 소 를 먼저 말 합 니 다.http://labs.abeautifulsite.net/projects/js/jquery/alerts/jquery.alerts-1.1.zip 1:먼저에서 JQuery,jquery.ui.draggable,jquery.alerts 의 css,js 파일 을 가 져 옵 니 다.iE 에서 alert 플러그 인 을 올 바 르 게 사용 하기 위해 alert 플러그 인 을 올 바 르 게 사용 합 니 다.당신 은 페이지 에 언제 DTD 를 추가 해 야 합 니까?2:이 Jquery 플러그 인 을 다음 과 같은 방식 으로 사용 할 수 있 습 니 다."jAlert(message,[title,callback])jConfirm(message,[title,callback])jPrompt(message,[value,title,callback])주:자바 script 표준 함수 와 달리 message 에서 HTML 매개 변 수 를 사용 하여 알림 정 보 를 표시 할 수 있 습 니 다.3:호환성:alert 플러그 인 은 JQuery 1.2.6 이상 의 jQuery 패 키 지 를 사용 해 야 합 니 다.IE6,IE7,FF2,FF3,Safari 3,Chrome,Opera 9 브 라 우 저 에서 잘 작 동 하 는 것 으로 테스트 되 었 습 니 다.4.데모:주:데모 에 dragonable 플러그 인 이 도입 되 어 있 기 때문에 Test Alert 를 끌 수 없습니다

 
jAlert('This is a custom alert box; 
<a href=\"http://www.cnblogs.com/whitewolf/\"> 
         </a>', 
'Alert Dialog');

Test Confirm

 
jConfirm('Can you confirm this? 
<a href=\"http://www.cnblogs.com/whitewolf/\"> 
         </a>', 
'Confirmation Dialog', function(r) { 
jAlert('Confirmed: ' + r, 'Confirmation Results'); 
});

Test Prompt

 
jPrompt('Type something:< 
a href=\"http://www.cnblogs.com/whitewolf/\"> 
         </a>', 
'WhiteWolf', 'Prompt Dialog', function(r) { 
if( r ) alert('You entered ' + r); 
});

jConfirm 리 턴 에 관 한 해결 방안 을 오늘 틈 을 타서 고려 해 봤 습 니 다.나 는 lastwinter 가 이 문 제 를 묻 는 것 은 ASP.NET 에 관 한 답전 문제 라 고 생각한다.이것 은 주로 jConfirm 이라는 것 이 CallBack 반전 이 고 그 는 비동기 적 이 며 동기 화 되 지 않 는 다.그래서 나 는 사건 의 거품 을 막 으 려 고 시 도 했 고 트 루 로 선택 하면 자동 으로 전달 되 었 다.LinkButton 테스트(Button 은 이 솔 루 션 과 다른 방안 을 뒤에 설명 합 니 다)로 LinkButton 의 CODE DEMO 를 붙 입 니 다.jConfirm 리 턴 DEMO

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="Script/jquery-1.3.2.min.js" type="text/javascript"></script> 
<script src="Script/jquery.alerts-1.1/jquery.alerts.js" type="text/javascript"></script> 
<link href="Script/jquery.alerts-1.1/jquery.alerts.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<form id="form1" runat="server"> 
<asp:LinkButton ID="LinkButton1" runat="server" onclick="Button1_Click" >LinkButton</asp:LinkButton> 
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> 
<div> 
</div> 
</form> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("#<%=LinkButton1.ClientID %>").click(function(event) { 
jConfirm("test", "test jconfirm", function(r) { 
if (r) { 
<%= Page.ClientScript.GetPostBackClientHyperlink(LinkButton1,"") %> 
} 
}); 
event.stopPropagation(); 
event.preventDefault(); 
}); 
}); 
</script> 
</body> 
</html>

LinkButton 1 Button Click CODE

 
protected void Button1_Click(object sender, EventArgs e) 
{ 
this.Label1.Text = DateTime.Now.ToString(); 
}

주로 사건 의 거품 이벤트.stopPropagation()을 먼저 막 습 니 다.event.preventDefault(); jConfirm 의 callback 리 셋 함수 에서 리 셋 이 필요 한 지 판단 합 니 다.<%=Page.ClientScript.GetPost BackClient Hyperlink(LinkButton 1,")%>;LinkButton 1 을 누 르 면 효과 가 있 습 니 다

Cancel 을 누 르 면 답장 이 오지 않 습 니 다.ok 을 누 르 면 전송 업데이트 시간 이 발생 합 니 다

우리 의 LinkButton 의 실현 은 출력 된 클 라 이언 트 Html 코드 에 스 크 립 트 가 자동 으로 전송 되 고 Button 은 HTML 요소 submit 입 니 다.제출 하기 때문에 이 두 가지 차이 점 에서LinkButton 은 javascript 코드 가 몇 군데 더 있 습 니 다

 
<script type="text/javascript"> 
//<![CDATA[ 
var theForm = document.forms['form1']; 
if (!theForm) { 
theForm = document.form1; 
} 
function __doPostBack(eventTarget, eventArgument) { 
if (!theForm.onsubmit || (theForm.onsubmit() != false)) { 
theForm.__EVENTTARGET.value = eventTarget; 
theForm.__EVENTARGUMENT.value = eventArgument; 
theForm.submit(); 
} 
} 
//]]> 
</script>

input Hidden

 
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> 
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

위 에서 말 한 뜻 은 Button 으로 같은 예 시 를 실현 하려 면 제 출력 클 라 이언 트 의 코드 에 이러한 리 턴 스 크 립 트 가 등록 되 어 있 는 것 을 보증 해 야 합 니 다.그리고<%=Page.ClientScript.GetPost BackEventReference(Button 1,")%로 리 턴 되 어야 합 니 다.그래서 링크 버튼 이 더 잘 어 울 릴 것 같 아 요.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

BeautifulSoup 라 이브 러 리 에 해상도 경고 가 표시 되 지 않 았 습 니 다.

코드 가 실 행 된 후 다음 과 같이 경고 합 니 다.UserWarning:No parser was explicitly specified,so I'm using the best available HTML parser...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

jQuery 기반 팝 업 경고 대화 상자 미화 플러그 인(경고,확인,알림)

좋은 웹페이지 즐겨찾기