도와주세요

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

도토리묵2018.11.01 11:28조회 수 92댓글 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시간동안 작업한 결과가 고작 저거라니;;

  • 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
    도토리묵글쓴이
    2018.11.1 22:29

    역시 hummit 님!

    감사합니당

  • @도토리묵
    2018.11.1 22:36

    네 열심히 만드세요 ㅎㅎㅎ

댓글 달기

번호 제목 글쓴이 날짜 조회 수
공지 호스팅 신청이 다시 가능합니다.15 마스터 2019.04.18 792
공지 회원 전용 페이지가 생겼습니다.15 마스터 2018.03.20 6642
공지 [필독] 질문하는 방법5 마스터 2018.02.23 872
477 mysql에서 select * from 테이블....2 홀민 2018.11.19 41
476 네이버 카페 대문에 입력할 이미지맵이 적용 안됩니다.ㅠㅜㅠㅜ 빙그래 2018.11.16 106
475 codepen은 저작권이 앖나요??9 title: 에그joyful 2018.11.16 251
474 sfu호스팅 결제오류..?2 nx_OP 2018.11.15 54
473 라이믹스 로그인 버튼3 title: IllustratorNginx 2018.11.15 57
472 RSS 게시판 업데이터 사용 관련 질문3 도토리묵 2018.11.15 47
471 네이비즘에서 측정한 스포어 서버시간의 오차 관련 질문 드립니다 (서버시간 측정 관련)4 이니스프리 2018.11.14 174
470 라이믹스 도와주세요!1 title: IllustratorNginx 2018.11.14 47
469 웹 개발 언어를 만들어보려고 합니다1 Piedots 2018.11.13 51
468 커뮤니티 사이트를 제작해보려고 합니다3 ndbdbbn 2018.11.11 152
467 Amazon Route 53 DNS 셋팅관련7 협스 2018.11.11 61
466 미디어위키 flow확장기능 오류가 발생했습니다.1 AA 2018.11.10 45
465 안녕하세요!!!.. 왕초보 웹사이트 제작 관련 질문 드립니다.8 그냥왕초보일기 2018.11.09 79
464 컴퓨터가 안꺼져요11 title: 커피허니버터뚠뚜니라이츄 2018.11.08 382
463 우분투의 crontab을 관리하는 노하우나 툴이 있을까요?14 이니스프리 2018.11.07 112
462 계산기를 만드는데 문제가!6 studyHTML 2018.11.06 74
461 국제전자센터에서 스마트폰 구입 괜찮을까요?2 이니스프리 2018.11.05 539
레이아웃에 알림 추가하는법3 도토리묵 2018.11.01 92
459 구매한 아이콘 없애는법 아시는분?2 슬기 2018.10.29 61
458 네이버 웹마스터도구에 대해서 질문이 있습니다.8 MYIG 2018.10.28 79
이전 1 2 3 4 5 6 7 8 9 10... 29다음
첨부 (1)
1.PNG
4.7KB / Download 6
서버에 요청 중입니다. 잠시만 기다려 주십시오...