다운로드 : 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> |
# 출력결과
