다운로드 : https://www.jqueryscript.net/
Simple Plain Dialog Popup Plugin For jQuery Alerts이라는 jQuery 모듈을 사용하게 되었다.
이런 기존의 Dialog 경고창을 대신해 주는것을 jAlert이라고 하는 것 같은데 이건 그 수많은 모듈중 한가지일 뿐이다.
사용방법이 굉장히 단순해서 포스팅할 것 까지는 없었지만.
몇가지 기능적인 부분을 사용중 답답함을 느껴 이렇게 포스팅 하게 되었다.
■ 경고(Alert)창 팝업
#01. 기본 경고(Alert)창 팝업
# 소스코드
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>:: jQuery 심플 다이얼로그 팝업 ::</title> <link rel="stylesheet" href="jquery.alerts.css"> <script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script> <script type="text/JavaScript" src="jquery.alerts.js" ></script> <script type="text/javascript"> function normalAlertWindow() { jAlert("루키", "#RED"); } </script> </head> <body> <h1>NOMAL ALERT</h1> <input type="button" onClick="normalAlertWindow();" value="경고창"/> </body> </html>
|
# 출력결과
#02. 콜백 기능을 이용한 경고(Alert)창 팝업
사실 해당 글을 포스팅하게 된 이유는 이것이다.
기본적인 alert창의 경우 alert창이 뜨게 되면 확인 버튼을 클릭하기 전까지
다음 작업이 진행되지 않지만, 이 jAlert의 경우는 창이 오픈됨과 동시에 바로 다음 작업이 진행되기 떄문에.
jAlert창이 팝업이 되고 정상적으로 OK 버튼을 누른 이후에 작업을 진행하기 위해서, 콜백 기능을 사용하게 되었다,
# 소스코드
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>:: jQuery 심플 다이얼로그 팝업 ::</title> <link rel="stylesheet" href="jquery.alerts.css"> <script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script> <script type="text/JavaScript" src="jquery.alerts.js" ></script> <script type="text/javascript"> function callbackAlertWindow() { jAlert("피카부", "#VELVET", function() { window.location.href = "http://magic.wickedmiso.com/"; }); } </script> </head> <body> <h1>CALLBACK ALERT</h1> <input type="button" onClick="callbackAlertWindow();" value="경고창"/> </body> </html>
|
# 출력결과
■ 확인(Confirm)창 팝업
# 소스코드
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>:: jQuery 심플 다이얼로그 팝업 ::</title> <link rel="stylesheet" href="jquery.alerts.css"> <script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script> <script type="text/JavaScript" src="jquery.alerts.js" ></script> <script type="text/javascript"> function choiceConfirmWindow() { jConfirm("빨간맛", "#RED", function(result) { if(result == true) { alert("빨간맛 궁금해 허니"); } else if(result == false) { alert("내가 제일 좋아하는건 여름에 너어~"); } }); } </script> </head> <body> <h1>CALLBACK ALERT</h1> <input type="button" onClick="choiceConfirmWindow();" value="경고창"/> </body> </html> |
# 출력결과