[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
//

티스토리툴바