도와주세요

레이아웃에 알림 추가하는법

title: KS마크도토리묵2018.11.01 11:28조회 수 89댓글 3

  • 1
    • 글자 크기

 

레이아웃 상단에 알림센터를 추가하고 싶습니다.
저번에도 이 질문 한번 했었는데 다시 재질문을 드리게 됬습니다.
제가 원하는건 저 알림모양 벨을 누르면 저 사각형박스가 나오면서 그 안에 알림이 나오게 하고 싶습니다.
이런 글에 대해서 아무리 찾아봤지만 정보가 별로 없더군요..;

그래서 일단 코드는 임시로.
 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<a class='item' onclick='getHeaderNotices()'>
                           <script>
function getHeaderNotices() {
                                    if ($('#header-notices').css('display') === 'none') {
                                        if (loaded) return $('#header-notices').slideDown(200);
                                        loaded = true;
                                        renderNotices(true);
                                    } else {
                                        closeHeaderNotices();
                                    }
                                };
</script>
                                <i class="fa fa-bell" aria-hidden="true"></i>
                           <div class="header-notices" id="header-notices" style="display: block;">
                             <div class="item">
                               <div class="nothing"><i class="frown icon"></i>이런... 새로운 알림이 없네요.</div>
                             <div class="more" onclick="location.replace('/notices')">알림 더 보기</div>
                             </div>
                             </div>
                         </a>

 

요론식으로 해놓았습니다.
저 onclick 함수를 사용하여 버튼을 누르면 저 팝업이 뜨도록, 그리고 저 버튼을 다시 누르면 팝업이 꺼지도록 하고 싶습니다.
그리고 알림이 나오게 하고 싶고요..

알림이 없는 상황이라면 이런..알림이 없네요 라는 문구가 출력되게 하고 싶습니다.
다른 레이아웃 다 뒤져보면서 일단 시도는 해봤으나 어려워서 머리가 돌아가질 않네요.
3시간동안 작업한 결과가 고작 저거라니;;

EDM이 유흥이 아닌 문화가 될때까지!

일렉트로니카 갤러리 / 은가비 : https://ungabi.ga

개인블로그: www.dotorimuk.cf


  • 1
    • 글자 크기
국제전자센터에서 스마트폰 구입 괜찮을까요? (by 이니스프리) 구매한 아이콘 없애는법 아시는분? (by 슬기)
  • 2018.11.1 18:25

    열기 닫기 기능은 아래와 같은 자바스크립트 코드면 구현이 가능합니다.


    <script>
    function getHeaderNotices() {
      if ($('#header-notices').css('display') === 'none') {
        $('#header-notices').css('display', 'block');
      } else {
        $('#header-notices').css('display', 'none');
      }
    };
    </script>
    <a class='item' onclick='getHeaderNotices()'>
      <i class="fa fa-bell" aria-hidden="true"></i>
      <div class="header-notices" id="header-notices" style="display: none;">
        <div class="item">
          <div class="nothing"><i class="frown icon"></i>이런... 새로운 알림이 없네요.</div>
          <div class="more" onclick="location.replace('/notices')">알림 더 보기</div>
        </div>
      </div>
    </a>



    그리고 알림 여부에 따라 달라지는 내용의 경우 div class="nothing" 부분을 php로 이용해서 내용이 없으면 <div class="nothing"><i class="frown icon"></i>이런... 새로운 알림이 없네요.</div> 로 보여주고, 내용이 있는 경우 해당 내용을 보여주는 식으로 하시면 됩니다.

  • @humit
    title: KS마크도토리묵글쓴이
    2018.11.1 22:29

    역시 hummit 님!

    감사합니당

  • @도토리묵
    2018.11.1 22:36

    네 열심히 만드세요 ㅎㅎㅎ

댓글 달기

번호 제목 글쓴이 날짜 조회 수
공지 회선 문제 및 Project HOSTING에 관해25 마스터 2018.11.05 572
공지 회원 전용 페이지가 생겼습니다.12 마스터 2018.03.20 2028
공지 [필독] 질문하는 방법5 마스터 2018.02.23 505
468 국제전자센터에서 스마트폰 구입 괜찮을까요?2 이니스프리 2018.11.05 90
레이아웃에 알림 추가하는법3 title: KS마크도토리묵 2018.11.01 89
466 구매한 아이콘 없애는법 아시는분?2 슬기 2018.10.29 54
465 네이버 웹마스터도구에 대해서 질문이 있습니다.8 MYIG 2018.10.28 66
464 https 에서 http 불러올수있는 방법이 뭐가있을까요?8 슬기 2018.10.28 73
463 문제가 무엇인가요?1 Blessed_Umbrella 2018.10.28 38
462 나무위키같은 각주를 구현하는 방법을 찾습니다.1 Blessed_Umbrella 2018.10.27 43
461 개인정보 보호 오류 무엇...ㅠㅠ10 title: 다꼬리허니버터뚠뚜니라이츄 2018.10.27 73
460 질문 드린 CSV 파일 업로드에 대한 코드를 작성했어요 ^^ 실사용 전에 보안상 취약점 등 문제는 없는지 여쭤봅니다2 이니스프리 2018.10.26 49
459 [RX] 스티커 모듈관련 질문4 title: KS마크도토리묵 2018.10.25 50
458 미디어위키 update.php 실행법3 관종 2018.10.25 42
457 다른 서버에 있는 CSV 파일을 불러오는 방법에 대해 여쭤봅니다 ^^9 이니스프리 2018.10.24 83
456 웹 사이트를 만들어보고 있습니다4 Blessed_Umbrella 2018.10.23 58
455 사이트 방문자수와 검색 노출 등에 관하여 질문 드립니다14 이니스프리 2018.10.22 95
454 아주아주 초보인데 페이지 접속 관련하여 질문 하나만 드립니다.2 swimmie 2018.10.21 40
453 api관련 xml에 대한 질문 좀 드릴께요. (전 아주아주 초보 입니다.)11 홀민 2018.10.21 77
452 studyforus 사이트 ipv4 변경으로 인한 오류4 nx_OP 2018.10.21 51
451 후이즈 도메인 3년 연장 하자마자 이상한일이...3 참비 2018.10.21 51
450 어떻게 하면 제 페이지에 들어갈 수 있을까요?4 studyHTML 2018.10.18 71
449 studyforus 타 인증기관 인증서 설치7 nx_OP 2018.10.18 73
이전 1 2 3 4 5 6 7 8 9 10... 25다음
첨부 (1)
1.PNG
4.7KB / Download 1
서버에 요청 중입니다. 잠시만 기다려 주십시오...