테스트 사이트 - 개발 중인 베타 버전입니다

alert 바꿔서 효과주기(sweetalert)

· 8개월 전 · 916 · 13

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]

댓글 작성

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

로그인하기

댓글 13개

8개월 전

좋은정보 감사합니다.

8개월 전

감사합니다.  '◡'

8개월 전

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

8개월 전

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

저처럼 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코드를 수정할 필요가 없습니다.

 

8개월 전

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

7개월 전

@케빈엉클 

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

7개월 전

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

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

8개월 전

감사합니다.

8개월 전

감사 합니다.

7개월 전

감사합니다

게시글 목록

번호 제목
23798
23797
23792
23791
23785
23781
23770
23766
23764
23761
23747
23732
23724
23718
23706
23700
23697
23686
23682
23681
23680
23678
23665
23644
23643
23639
23637
23630
23626
23616