jquery mobile 에서 alert 만들기 (jquery plugin 사용)

pc 웹에서도 사용가능합니다.

 

 

jquery mobile 을 사용해서 하이브리드 앱을 만들다 보니 alert 창이 너무 거슬린다.

 

이유는 alert 창에 웹주소가 표시되기 때문이다.

 

그래서 jquery mobile dialog (다이얼로그 팝업)를 이용해보니 알림이라기 보다는 팝업의 느낌이 강했다.

 

화면도 사라지고 별도에 다이얼로그 창 하나가 떠서 페이지를 이동한 느낌이 강했다.

 

http://cofs.tistory.com/154 <- jquery mobile 다이얼로그 팝업 강좌

 

 

다른 방법으로 jquery 의 dialog 를 이용해 보았다.

 

그랬더니 화면이 깨지더라....  css 가 충돌인지 무슨이유인지 깊게 알고싶지 않았다.

 



 

그래서 jquery plugin 을 찾아보았다.

 

생각보다 나와 같은 고민을 하는 사람이 있었다. 그러던 중 알맞은 plugin을 찾았다.

 

 

 

 

위 이미지를 포함한 여러가지 색생과 테마를 제공한다.

 

자동 리사이징 되어서 mobile 환경에서도 문제없이 사용가능하고 web 환경에서도 사용가능하다.

 

 

단순한 알림창으로만 사용하려면 문제가 없지만 기존의 alert 처럼 사용하기에는 문제가 있다.

 

예를 들어서 다음과 같은 소스가 있다고 하자.

1
2
3
4
<script>
   alert("안녕");
   location.href = "http://www.naver.com";
<script>
cs

 

보통의 웹에서는 안녕이라는 alert 창이 뜨고 확인을 누르면 href 가 실행되어 해당하는 페이지로 이동하게 된다.

 

web의 alert은 잠시동안 프로세스를 정지시키는 효과가 있다. 그래서 확인 버튼을 누르면 자동으로 다음 작업을 실행하게 되는 것이다.

 

하지만 사용하려는 plugin 은 별도의 modal 화면(화면 위에 떠있는 태그일 뿐)이기 때문에 계속 작업이 진행된다.

 

안녕이라는 alert 창이 보이고 바로 페이지 이동을 실행해 버린다. 너무 빨라 안보일 수 도 있다.

 

그래서 번거롭더라도 다음 작업(위 소스 기준으로 href)을 확인 버튼을 누른 후 callback 함수를 이용하도록 유도해야 한다.

 

불편할 수 도 있지만 사용해보니 jquery mobile dialog 보다 시각적으로 훨씬 낫다.

 

그래서 커스터마이징이 필요하다.

 

하지만 기본적으로 필요한 부분은 이미 다 해놨다. 가져다 쓰기만 하면 된다.

 

 



 

 

먼저 plugin을 아래 주소에서 다운받는다.

 

https://github.com/CreativeDream/jquery.modal

 

 

 

플러그인 정보이다.

 

jQuery Modal
Copyright (c) 2015 CreativeDream
Website
http://creativedream.net/plugins
Version: 1.2.3 (10-04-2015)
Requires: jQuery v1.7.1 or later

 

MIT License 이니 자유롭게 사용해도 되겠다.

 

 

plugin를 import 하는 방법(js, css import)은 생략한다.

 

 

다음은 실제로 사용하는 방법이다.

 

나는 편하게 사용하기 위해서 공통 js 파일에 정의해놓고 사용한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
function alertBox(txt, callbackMethod, jsonData){
    modal({
        type: 'alert',
        title: '알림',
        text: txt,
        callback: function(result){
            if(callbackMethod){
                callbackMethod(jsonData);
            }
        }
    });
}
 
function alertBoxFocus(txt, obj){
    modal({
        type: 'alert',
        title: '알림',
        text: txt,
        callback: function(result){
            obj.focus();
        }
    });
}
 
    
function confirmBox(txt, callbackMethod, jsonData){
    modal({
        type: 'confirm',
        title: '알림',
        text: txt,
        callback: function(result) {
            if(result){
                callbackMethod(jsonData);
            }
        }
    });
}
 
function promptBox(txt, callbackMethod, jsonData){
    modal({
        type: 'prompt',
        title: 'Prompt',
        text: txt,
        callback: function(result) {
            if(result){
                callbackMethod(jsonData);
            }
        }
    });
}
 
function successBox(txt){
    modal({
        type: 'success',
        title: 'Success',
        text: txt
    });
}
 
function warningBox(txt){
    modal({
        type: 'warning',
        title: 'Warning',
        text: txt,
        center: false
    });
}
 
function infoBox(txt){
    modal({
        type: 'info',
        title: 'Info',
        text: txt,
        autoclose: true
    });
}
 
function errorBox(txt){
    modal({
        type: 'error',
        title: 'Error',
        text: txt
    });
}
 
function invertedBox(txt){
    modal({
        type: 'inverted',
        title: 'Inverted',
        text: txt
    });
}
 
function primaryBox(txt){
    modal({
        type: 'primary',
        title: 'Primary',
        text: txt
    });
}
cs

 

크게 어려운게 없어보이니 소스설명은 생략한다.

 

기본적인 사용방법은 다음과 같다.

1
2
3
4
5
6
7
<script>
   alertBox("안녕", goNaver);
 
   function goNaver(){
      location.href = "http://www.naver.com";
   }
<script>
cs

 

1
2
3
4
5
6
7
<script>
   alertBox("안녕", goNaver, {url:"http://www.naver.com"});
 
   function goNaver(urlData){
      location.href = urlData.url;
   }
<script>
cs

 

 

위에서 설명했듯이 callback 함수를 이용해야 함으로 손이 많이 가는것은 사실이다.

 

하지만 callback 함수를 지원하는 것에 대해 너무 고마운건 사실이다.

 

 

 

 

 

 

 

 

 

by 개발자 CofS 2016.05.17 11:29
  • BlogIcon creazqqqq 2016.05.17 14:54 신고 ADDR EDIT/DEL REPLY

    좋은정보 감사합니다

  • Favicon of https://hangukin.tistory.com BlogIcon 물색없는세상 2016.06.22 11:05 신고 ADDR EDIT/DEL REPLY

    function primaryBox(txt){
    modal({
    type: 'primary',
    title: 'Primary',
    text: txt, <-- 여기 [,] 이게 들어가있네요~ 마지막에는 안들어 가야 제대로 돌아갈텐데요..ㅎㅎ
    });
    }
    약간의 실수가 있군요..^^

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2016.06.22 15:20 신고 EDIT/DEL

      그러네요 ㅜ.ㅜ
      눈썰미에 감탄합니다 ^^
      불필요한 부분은 걷어내고 소스를 올리느라 미쳐 확인하지 못했네요ㅜㅜ

      그리고 버전이 정확히 기억나진 않지만 ie9 이상인가 부터는 콤마 오타가 오류나지않고 실행되서 그냥올렸네요ㅠㅠ

      수정했습니다!! 감사합니다 ^^

  • woomi 2016.09.02 17:45 신고 ADDR EDIT/DEL REPLY

    초보입니다.
    하나 문의해도 될까요?
    스크립트로 confirmBox 호출하고 확인인지 취소인지 알수 있는 방법이 어떤건지요?
    true / false 을 알아서 처리할라고 하는데 그냥 넘어가네요;;

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2016.09.05 16:32 신고 EDIT/DEL

      구현된 confirmBox 함수를 보시면 callback 에서 result 부분이 comfirm에 대한 리턴값(boolean) 입니다.

      confirmBox 와 같이 직접 처리할 수 있는 함수를 하나 더 구현하시면 될 것 같습니다.

  • joosha89 2016.09.06 18:57 신고 ADDR EDIT/DEL REPLY

    안녕하세요.
    알려주신 팝업으로 php파일 안에서 echo로 찍어서 스크립트를 구현을 해보았는데 콜백함수를 지정해도 그냥 다음 php코드로 계속 로딩되더라구요~ 혹시 php안에선 작동이 안되나요>

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2016.09.07 16:53 신고 EDIT/DEL

      제가 php는 잘 몰라서...ㅠㅠ
      답변드리기가 어렵습니당 ㅠㅠ..

  • 2018.02.22 19:07 ADDR EDIT/DEL REPLY

    비밀댓글입니다

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2018.02.23 10:51 신고 EDIT/DEL

      안녕하세요 ㅎㅎ
      confirmBox 의 callback 함수 부분을 보시면 result 파라미터가 있는데 이는 boolean 값으로 확인했을 시 true, 취소했을 시 false로 넘어옵니다.
      예제에 있는 confirmBox 함수는 true 즉 확인 시에만 다음 함수를 실행하도록 되어있습니다. 고로 confirmBox와 비슷하게 새로운 confirmBox 함수를 추가하고 이번에는 취소 즉 false 일 때도 특정 동작을 하도록 구현하면 되겠습니다 ㅎㅎ

    • 2018.02.23 12:35 EDIT/DEL

      비밀댓글입니다

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2018.02.23 13:11 신고 EDIT/DEL

      흠... 직접 보지 않고 댓글만으론 해결해 드리기가 어렵겠네요 ㅠㅠ

  • ㄷㄹㅈㅇ 2018.12.04 09:07 신고 ADDR EDIT/DEL REPLY

    브라우저 개발사가 얼럿을 오버라이딩이라도 할수있게 해주면 좋은데 말이죠.. 별도적용시 스크립트문 까지 변경해야하니... 기존 웹 얼럿이 코드 진행 멈춰줫는데 보통 그게 안되 콜백해야되니 참.. 짜잉

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2018.12.04 09:21 신고 EDIT/DEL

      그러게요 ㅎㅎ
      얼럿을 좀 다양하게 활용하면 좋을꺼같다는 생각을 하게 되네요 ㅎㅎ

  • 감사합니다. 2019.03.18 10:35 신고 ADDR EDIT/DEL REPLY

    좋은 정보 감사합니다.

    한가지 궁금한것이 있는데요.
    기존 alert에서 \n 으로 줄바꿈 처리를 해주는데요.

    이 플러그인에서는 \n으로 줄바꿈 처리가 되지 않는데요.
    줄바꿈 처리 방법이 있을까요?

    • 감사합니다. 2019.03.18 11:03 신고 EDIT/DEL

      <br /> 넣으니 줄바꿈되네요. ^^

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2019.03.18 16:34 신고 EDIT/DEL

      안녕하세요 !
      자답 환영입니다ㅎㅎ
      감사합니다 ^^!!