만

alert 바꿔서 효과주기(sweetalert)

· 2025-03-12 (수) 09:47:36 · 3524 · 12

alert 에 효과를 주는 스크립트입니다.

적용하면 기본으로 적용됩니다. 자세한 내용은 사이트를 참조하시면 됩니다.

https://sweetalert.js.org/

 

 

적용하실 페이지나 그누보드 head 에 넣어서 전체 적용하셔도 됩니다.

[code]

add_javascript('<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>', 10);

[/code]

 

변경하실 코드에 alert 를 swal 로 변경하시면 끝입니다.

[code]

swal("상품을 장바구니에 추가하였습니다.", "", "success");

[/code]

|

댓글 12개

좋은정보 감사합니다.

2025-03-12 (수) 10:46:26

업그레이드 버전도 있습니다. 개인적으로는 구버전이 뭔가 더 부드럽게 느껴지네요, 
https://sweetalert2.github.io

감사합니다. 너무 좋네요.

저처럼 alert을 여러군데서 쓴다면 일일이 바꿔줘여 해서 좀 불편할 때는 다음과 같이 하면 좀더 편하게 하실수 있어요.

SweetAlert2 (swal)를 사용하여 기존의 모든 alert을 그대로 사용하면서 swal로 다 대체할 수 있습니다. 다음과 같이 구현할 수 있습니다.

 

head.sub.php에

[code]

// ... existing code ...

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

// ... existing code ...

[/code]

 

그리고 모든 alert을 swal로 대체하기 위해 다음 JavaScript 코드를 head.php 파일에 추가하세요.

[code]

// ... existing code ...

<script>

    // 기존 스크립트 유지

    $(function(){

        $(".gnb_menu_btn").click(function(){

            $("#gnb_all, #gnb_all_bg").show();

        });

               

        $(".gnb_close_btn, #gnb_all_bg").click(function(){

            $("#gnb_all, #gnb_all_bg").hide();

        });

    });

 

    // alert을 swal로 대체

    window.alert = function(message) {

        Swal.fire({

            text: message,

            icon: 'info',

            confirmButtonText: '확인'

        });

    };

</script>

// ... existing code ...

[/code]

 

이렇게 하면 기존의 모든 alert() 호출이 자동으로 SweetAlert2로 대체됩니다.
기존 alert코드를 수정할 필요가 없습니다.

 

@케빈엉클 우왓! 너무 감사합니다. :)

2025-03-20 (목) 16:23:24

@케빈엉클 

감사합니다. 비회원 상태나 주소이동이 있는 경우 그냥 경고창으로 나오는데 이것도 바꿀수 있는 방법이 있나요?

@페레이라 비회원..그건 상관없이 작동되야합니다...주소이동은 새창으로 이동되면 당연히 새창에 새로운 SWAL문을 입력하지않는한 작동안될겁니다.

계속 안되면 안되는 url이나 부분 source를 알려주시면 확인될수도 있을 듯 합니다.

감사합니다.

감사 합니다.

2025-03-13 (목) 09:46:24

감사합니다

2025-03-14 (금) 15:08:46

호호호 이윰에 이전부터 있던데 이쁘드라구요

감사합니다

감사합니다

감사합니다.

댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
25-04-10 조회 3,685
25-04-09 조회 4,032
25-04-08 조회 3,247
25-04-02 조회 3,255
25-03-30 조회 3,225
25-03-27 조회 3,180
25-03-26 조회 3,098
25-03-26 조회 3,248
25-03-25 조회 3,303
25-03-23 조회 3,270
25-03-21 조회 3,373
25-03-20 조회 3,192
25-03-19 조회 3,241
25-03-18 조회 3,493
25-03-17 조회 3,017
25-03-13 조회 3,130
25-03-12 조회 3,525
25-03-09 조회 3,091
25-03-06 조회 3,256
25-03-05 조회 3,421
25-03-04 조회 3,388
25-03-04 조회 2,853
25-02-27 조회 3,340
25-02-27 조회 3,023
25-02-27 조회 2,882
25-02-27 조회 3,080
25-02-27 조회 3,198
25-02-24 조회 3,209
25-02-22 조회 3,108
25-02-21 조회 3,087