기존 alert 알림, 팝업창 변경하기 > 그누보드5 팁자료실

그누보드5 팁자료실

기존 alert 알림, 팝업창 변경하기 정보

기존 alert 알림, 팝업창 변경하기

본문

우선 저의 팝업창의 경우 클릭조건을 줘야하는 단점이 있지만, 트리거를 이용해서 해결했습니다.

 

이건 저의 해당 사항이기 때문에 나머지 분들도 좋은 방법으로 커스텀해서 사용하시면 됩니다.

 

저와 비슷한 작업을 원하시는 분들에 대한 자료 제공입니다. (큰 도움은... 안되지만요^^)

 

bbs/alert.php 으로 이동 합니다.

 

중간에 아래의 소스코드가 있는데요.

저는 이런식으로 변경하여 커스텀 알림을 띄우고 있습니다.

 

<script>
alert("<?php echo $msg; ?>");
//document.location.href = "<?php echo $url; ?>";
<?php if ($url) { ?>
document.location.replace("<?php echo str_replace('&', '&', $url); ?>");
<?php } else { ?>
//alert('history.back();');
history.back();
<?php } ?>
</script>

 

----------------------------------------

 

<div class="error_form">
    <a href="#" class="error_desk" id="error_desk" style="display:none"></a>
</div>

<script>
$(document).ready(function() {
    new jBox('Modal', {
        attach: $('#error_desk'),
        width: 'auto',
        title: '<span style="color:dodgerblue"><i class="fas fa-exclamation-circle"></i> 알림</span>',
        overlay: false,
        createOnInit: true,
        content: '<?php echo $msg; ?><br/><br/><span style="float:right;color:lightgray;font-size:12px">3초뒤 이전 페이지로 이동합니다.</span>',
        draggable: true,
        repositionOnOpen: false,
        repositionOnContent: false
    });
    $(".jBox-closeButton").jBox("Mouse", {
        content: "<span style='color:dodgerblue;font-size:12px'><i class='fab fa-gratipay'></i> 헬프데스크</span><br/>알림창을 닫으면 이전 페이지로 돌아갑니다."
    });
    $("#error_desk").trigger("click");
    $(".jBox-closeButton").click(function () {
        <?php if ($url) { ?>

            // 이전 페이지로만 돌아가게 history.back(); 만 이용
            // document.location.replace("<?php echo str_replace('&', '&', $url); ?>");
            history.back();
        <?php } else { ?>
            history.back();
        <?php } ?>
    });
    setTimeout(function() {
        history.back();
    }, 3000);
});
</script>

 

위와 같이 제가 사용하는 커스텀 알림은 아래의 사진같이 나오겠죠.

 

1794433205_1549580570.8082.png

 

만약, 저 흰색 페이지 없이 본 페이지와 같이 보이게 할려면

 

bbs/alert.php 상단, 하단의 있는

include_once(G5_PATH.'/head.sub.php');

include_once(G5_PATH.'/tail.sub.php');

를 아래와 같이 변경하면 본 페이지 안으로 끌어올 수는 있습니다.

include_once('_head.php');

include_once('_tail.php');

 

다만, 그누보드가 bbs/alert.php으로 알림을 모두 보내기 때문에 전체 코어를 수정하기 보다는 위와 같은 방식으로 커스텀 하시면 그나마 수월 하실것 같습니다.

 

도움주신 세크티님, 플라이님 답변 감사합니다.

추천
2

댓글 2개

그누보드 자체에 적용되지않은 라이브러리까지 감안하여 팁을 주실땐

jBox 모달창 불러오는 라이브러리와 css 클래스까지 링크걸수있게 팁란에 추가하시면 더 좋을것 같습니다..
전체 2,426 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT