[jQuery] 팝업 창 외에 다른 항목 클릭 막기[jQuery] 팝업 창 외에 다른 항목 클릭 막기

Posted at 2019. 6. 4. 19:30 | Posted in JavaScript & jQuery/jQuery
반응형




참고 : 당신은 모를 수도 있는 CSS의 7가지 단위

이전글 : [jQuery] 움직이는 팝업 레이어 만들기






■ 팝업 창 외에 다른 항목 선택 불가 필름 만들기



# 소스 코드

<html>

<head>

<title>:: 제이쿼리 UI Draggable ::</title>

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>

<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<style type="text/css">

    #popWindow {

        position:absolute;

        display:none;

        background-color:#000000;

        left:10%;

        top:10%;

    }


    #closeBtn {

        position:absolute;

        width:24px;

        z-index:1;

        margin-left:-16px;

        margin-top:-8px;

    }


    #popBottom {

        height:28px;

        text-align:left;

        font-weight:bold;

        color:#FFFFFF;

        padding-left:10px;

        padding-right:10px;

    }

    

    /* vw(넓이)와 vh(높이)를 100으로 주면 자동으로 브라우저 전체 넓이, 높이를 지정할 수 있다. */

    #protectionFilm {

    display:none;

    position:absolute;

    background-color:rgba(0, 0, 0, 0.2);

    top:0px;

    left:0px;

    width:100vw;

    height:100vh;

    }

</style>

<script type="text/javascript">

    function popWindowOpen() {


        // css의 vmax 속성으로 세로 길이를 전부 채울 수 있지만.

        // 실제 개발중에는 레이어의 여백 설정 문제로 어느정도 칸이 남는경우가 존재한다.

        // 만약 작업중 레이어 전체가 체워지지 않는경우

        // document.body.offsetWidth와 document.body.offsetHeight 를 사용하여

        // 전체크기의 값을 구하자

        // jQuery("#protectionFilm").css("width", document.body.offsetWidth);

        // jQuery("#protectionFilm").css("height", document.body.offsetHeight);


    jQuery("#protectionFilm").css("display", "block");

        jQuery("#popWindow").css("display", "block");


        // draggable 기능에 containment 조건으로 팝업창이 움직일 수 있는 영역에 제한을 건다.

        jQuery("#popWindow").draggable({ containment : jQuery("#protectionFilm") });

    }


    function popWindowClose() {

    jQuery("#protectionFilm").css("display", "none");

        jQuery("#popWindow").css("display", "none");

    }

</script>

</head>

<body>

<div id="protectionFilm"></div>

<div id="popWindow">

    <div style="text-align:right;">

        <a href="javascript:;" onClick="popWindowClose();">

            <img id="closeBtn" src="./images/close_box_red.png"/>

        </a>

    </div>

    <a href="javascript:;" onClick="">

        <img src="./images/choi_seul_gi.jpg" style="position:static;"/>

    </a>

    <div id="popBottom">

        <label>

            <input type="checkbox" onClick="popWindowClose();">&nbsp;

            오늘&nbsp;하루&nbsp;이&nbsp;창을&nbsp;열지&nbsp;않습니다.

        </label>

    </div>

</div>

<input type="button" onClick="popWindowOpen();" value="팝업창 오픈"/>

</body>

</html>  




# 출력 결과







반응형
저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] JCROP을 이용한 이미지 자르기 - Sample  (5) 2020.02.11
[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작  (0) 2019.06.18
[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기  (7) 2019.01.31
[jQuery] Mobile Web 사용시 KEYBOARD 이벤트 체크  (0) 2018.11.17
[jQuery] 원을 그리며 카운트 세는 타이머 애니메이션  (0) 2018.11.02
//

[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기

Posted at 2019. 1. 31. 18:16 | Posted in JavaScript & jQuery/jQuery
반응형




참고 : http://2nusa.blogspot.com/2016/10/jquery-mouse-wheel.html





■ 한화면 단위로 끊어서 마우스 휠 이동시키기





해당코드는 jQuery 한화면 단위 Mouse Wheel 이동 포스팅을 가져와서 만든 내용이다.


위포스팅의 코드를 그대로 사용할 수 없는 상황이 되었기에 필요 부분을 수정하여 포스팅한다.

(파이어 폭스 브라우저에서 에러 발생 및 콘솔창 발생 에러 예외처리)




# 소스코드

<html>

<head>

<title>MouseWheel</title>

<style type="text/css">

    html,body{ margin:0;padding:0;width:100%;height:100%;}

    .box{ width:100%;height:100%;position:relative;color:#FFFFFF;font-size:24pt;}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

    jQuery(document).on("ready", function() {
        jQuery(".box").each(function () {
            
            // 개별적으로 Wheel 이벤트 적용
            jQuery(this).on("mousewheel DOMMouseScroll", function(event) {

                var delta = 0;
                var moveTop = null;
                var boxMax = jQuery(".box").length - 1;

                var winEvent = "";

                  
                if(!winEvent) {
                    winEvent = window.event;
                }

                if(winEvent.wheelDelta) {

                    delta = winEvent.wheelDelta / 120;
                    if(window.opera) {
                        delta = -delta;
                    }
                }

               
                else if(winEvent.detail) {
                    delta = -winEvent.detail / 3;
                }
                
                // 마우스휠을 위에서 아래로 이동
                if(delta < 0) {

                    // 마지막 BOX 보다 순서값이 작은 경우에 실행
                    if(jQuery(this).index() < boxMax) {
                        
                        console.log("▼");
                        if(jQuery(this).next() != undefined) {
                            moveTop = jQuery(this).next().offset().top;
                        }
                    }

                    // 마지막 BOX보다 더 아래로 내려가려고 하는경우 알림창 출력
                    else {
                        alert("마지막 페이지 입니다.");
                        return false;
                    }
                }

                // 마우스휠을 아래에서 위로 이동
                else {

                    // 첫번째 BOX 보다 순서값이 큰 경우에 실행
                    if(jQuery(this).index() > 0) {

                        console.log("▲");
                        if(jQuery(this).prev() != undefined) {
                            moveTop = jQuery(this).prev().offset().top;
                        }
                    }

                    // 첫번째 BOX 더 위로 올라가려고 하는 경우 알림창 출력
                    else {
                        alert("첫번째 페이지 입니다.");
                        return false;
                    }
                }

                // 화면 이동 0.8초(800)
                jQuery("html,body").stop().animate({
                    scrollTop : moveTop + "px"
                }
                , {
                    duration: 800, complete : function () { }
                });
            });
        });
    });
</script>
</head>
<body>
    <div class="box" style="background-color:#FF0000;">1</div>
    <div class="box" style="background-color:#FF4500;">2</div>
    <div class="box" style="background-color:#FFFF00;">3</div>
    <div class="box" style="background-color:#008000;">4</div>
    <div class="box" style="background-color:#0000FF;">5</div>
    <div class="box" style="background-color:#4B0082;">6</div>
    <div class="box" style="background-color:#EE82EE;">7</div>
</body>
</html>




# 출력결과



마우스 휠로 스크롤을 하며 상, 하 스크롤을 진행하다보면.


위 이미지와 같이 자동으로 다음 화면으로 이어지는 것을 확인할 수 있다.










반응형
저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작  (0) 2019.06.18
[jQuery] 팝업 창 외에 다른 항목 클릭 막기  (0) 2019.06.04
[jQuery] Mobile Web 사용시 KEYBOARD 이벤트 체크  (0) 2018.11.17
[jQuery] 원을 그리며 카운트 세는 타이머 애니메이션  (0) 2018.11.02
[jQuery] YouTube 영상 제어  (0) 2018.10.26
//

[jQuery] Mobile Web 사용시 KEYBOARD 이벤트 체크[jQuery] Mobile Web 사용시 KEYBOARD 이벤트 체크

Posted at 2018. 11. 17. 13:14 | Posted in JavaScript & jQuery/jQuery
반응형



■ 모바일 웹 키보드 ON / OFF 여부 체크하기




#01. 안드로이드(Android)에서 키보드 이벤트 체크


# 소스코드

<html>
<head>
<title>:: MOBILE 키보드 체크 ::</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/git/jquery.mobile-git.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/git/jquery.mobile-git.min.js"></script>
<script type="text/javascript">
  jQuery(window).load(function() {
     
      // 처음 시작시 화면의 사이즈 값을 가진다.
      var originalSize = jQuery(window).width() + jQuery(window).height();
     
      // 창의 사이즈 변화가 일어났을 경우 실행된다.
      jQuery(window).resize(function() {
         
        // 처음 사이즈와 현재 사이즈가 변경된 경우
        // 키보드가 올라온 경우
        if(jQuery(window).width() + jQuery(window).height() != originalSize) {
           
          alert("가상 키보드가 오픈 되었습니다."); 
        }
       
        // 처음 사이즈와 현재 사이즈가 동일한 경우
        // 키보드가 다시 내려간 경우
        else {
           
          alert("가상 키보드의 사용지 종료되었습니다.");
        }
      });
    });
</script>
</head>
<body>
<div data-role="page">
    <div data-role="header" data-position="fixed">
        <h1>:: MOBILE 키보드 체크 ::</h1>
    </div>
     <div data-role="content">
        <div data-role="fieldcontain">
            <label for="textinput">ID</label>
            <input type="text" name="id_input" id="id_input"/>
        </div>
        <div data-role="fieldcontain">
            <label for="textinput">Password</label>
            <input type="text" name="password_input" id="password_input"/>
        </div>
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <input type="submit" value="로그인"/>
            </div>
            <div class="ui-block-b">
                <input type="reset" value="로그아웃"/>
            </div>
        </div>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>FOOTER</h1>
    </div>
</div>
</body>
</html>




# 출력결과

 ① 키보드 오픈

 ② 키보드 종료









#02. 아이폰(iOS)에서 키보드 이벤트 체크



준비중



반응형
저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 팝업 창 외에 다른 항목 클릭 막기  (0) 2019.06.04
[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기  (7) 2019.01.31
[jQuery] 원을 그리며 카운트 세는 타이머 애니메이션  (0) 2018.11.02
[jQuery] YouTube 영상 제어  (0) 2018.10.26
[jQuery] 퍼센트 게이지를 나타내는 Progress Bar  (0) 2018.10.25
//

[jQuery] 원을 그리며 카운트 세는 타이머 애니메이션[jQuery] 원을 그리며 카운트 세는 타이머 애니메이션

Posted at 2018. 11. 2. 18:18 | Posted in JavaScript & jQuery/jQuery
반응형









■ 동그라미를 그리는 카운트 다운 애니메이션



원이 그려지면서 시간경과를 표기하는 애니메이션 효과가 필요했다.

마침 검색을 통해 위와같은 플러그인을 GITHUB에서 찾았고.

아래와 같이 필자에게 필요한 형태로 수정하게 되었다.



# 소스 코드

<html>
<head>
<title>circletimer</title>   
<link href="./css/circletimer.css" rel="stylesheet">
<style type="text/css">
  #example-timer {
    height:150px;
    margin:20px auto;
    width:150px;
  }
</style>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="./js/circletimer.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/highlight.min.js"></script>
<script type="text/javascript">
  jQuery(document).on("ready", function() {
    jQuery("#example-timer").circletimer({
      onComplete:function() {
        alert("시간이 종료되었습니다.");
      }
      , onUpdate:function(elapsed) {
               
          // 밀리 세컨드 단위를 초단위로 변경
          var second = ~~((Math.round(elapsed) - 3000) / 1000) % 60;
         
          // 음수로 처리된 시간(초)를 양수로 전환한다.
          jQuery("#time-elapsed").html(Math.abs(second));
      }
      , timeout : 3000     // 시간은 3초로 지정
      , clockwise : true    // 시계방향으로 회전
    });


    // 타이머 시작
    jQuery("#start").on("click", function() {
      jQuery("#example-timer").circletimer("start");
    });


    // 타이머 일시 정지
    jQuery("#pause").on("click", function() {
      jQuery("#example-timer").circletimer("pause");
    });


    // 타이머 종료
    jQuery("#stop").on("click", function() {
      jQuery("#example-timer").circletimer("stop");
    });


    // 타이머 1초 증가
    jQuery("#add").on("click", function() {
      jQuery("#example-timer").circletimer("add", 1000);
    });
  })
</script>
</head>
<body>
<div class="example">
    <div id="example-timer"></div>
  <p>Time Elapsed : <span id="time-elapsed">3</span>초</p>
  <button id="start">시작</button>
  <button id="pause">정지</button>
  <button id="stop">종료</button>
  <button id="add">1초 추가</button>
  <pre>
</pre>
</div>
</body>
</html> 




# 출력 결과








반응형
저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기  (7) 2019.01.31
[jQuery] Mobile Web 사용시 KEYBOARD 이벤트 체크  (0) 2018.11.17
[jQuery] YouTube 영상 제어  (0) 2018.10.26
[jQuery] 퍼센트 게이지를 나타내는 Progress Bar  (0) 2018.10.25
[jQuery] jQuery Ajax 전송  (0) 2018.09.28
//

티스토리툴바