자바스크립트 클릭 팝업 - jabaseukeulibteu keullig pab-eob

html 팝업창, html팝업창, javascript, popup, window.open, 스크립트, 자바스크립트, 자바스크립트 팝업, 자바스크립트팝업창, 팝업창, 함수

안녕하세요 요섹마 입니다.

이번 포스팅은 자바스크립트로 팝업창 만드는 방법을 알아보겠습니다.

우선 팝업창 링크를 걸어줄 <a>태그를 만들어줍니다

<a href="" target="_blank">팝업</a>

버튼은 알아서 예쁘게 만들어주시고

바로 스크립트로 넘어가겠습니다.

<script langauge="javascript">

function popup(){

var url="test2.html";

var option="width=200, height=300, top=200"

window.open(url, "", option);

}

</script>

스크립트를 선언하고

저는 편의상 popup라는 이름으로 함수를 만들었습니다.

그리고 변수를 선언해줍니다

var url 은 팝업의 경로 주소를 나타냅니다.

테스트용이므로 그냥 테스트파일 아무렇게나 만들어서 주소 입력해주면 됩니다.

var option 안의 내용은 넓이 높이 및 위치를 나타냅니다.

window.open는 새 윈도우를 (위에 선언한 경로, "", 위에 선언한 옵션)의 형태로 열겠다는 뜻입니다.

스크립트를 다 쓰고난 후에

처음 만들었던 a태그에 경로를 지정해줍니다.

<a href="javascript:popup()" target="_blank">팝업</a>

자바스크립트 내에서 경로를 지정해놓았으니 그냥 javascript:함수명() 을 경로로 지정해주면 됩니다.

이렇게 해서 실행을 시키면

이렇게 화면이 출력이 되고

팝업버튼을 클릭할 경우

팝업창이 출력이 됩니다.

참쉽죠?

근데 쓸 일이 사실 썩 그리 많은 편은 아닌 기능이라....

그냥 복사해두셨다가 필요할때마다 복붙하는게 편할것같아요 ㅋㅋ

이거랑 상관없어도 코딩 관련 질문 댓글로 남겨주시면 그걸로 다음 포스팅 진행해보도록 하겠습니다

음...더 쓸 말이 없으니 이만 포스팅을 마쳐보도록 하겠습니다

오늘은 CSS3와 간단한 자바스크립트를 활용해서 전체화면으로 나타나게 되는 팝업창 출력에 대해서 배워보았습니다. 조금 복잡하긴한데 이해하고 나니까 어떻게 돌아가는지 좀 알 것 같습니다. 먼저 HTML 부분부터 살펴보겠습니다.

See the Pen jQuery : Click Event (Full PopUp) by rgy0409 (@rgy0409) on CodePen.

HTML과 CSS 버튼을 누르면 마크업 상태 확인이 가능합니다. 본문의 내용을 보시면 크게 두 가지의 div가 존재합니다. 하나는 팝업창이며 다른 하나는 이 팝업창을 띄울 버튼 역할을 하는 div 입니다. 그러면 CSS 스타일시트도 살펴보시기 바랍니다.

CSS에서는 id 값이 popup인 div의 속성을 살펴보시면 화면 전체화면에 대한 팝업이므로 해상도에 상관없이 항상 고정값이어야 하기 때문에 position:fixed; 라고 속성을 부여했습니다. 그리고 평상시에는 숨어있어야 하기 때문에 display:none; 으로 입력했습니다. 가로 및 세로 크기는 100% 로 줘야 해상도에 꽉 차게 될 것입니다. reset 부분에 보시면 전체 태그에 대해서 padding 및 margin 을 0으로 줬기 때문에 단 1px의 여백이 없는 상태 입니다.

#popup 안쪽에 내용이 들어가는 div 부분인 #popmenu는 #popup의 정 중앙에 배치되도록 했습니다. 부모요소인 #popup에 position 값이 들어 있으니 position:absolute; 를 부여하고, left, top 값을 각 50%씩 주었습니다. 여기까지 하면 왼쪽 모서리가 정중앙에 배치되게 됩니다. div의 중심점을 중앙으로 오게 하기 위해서 transform: translate(-50%,-50%); 을 부여했습니다. 또는 #popmenu의 가로 및 세로 크기를 알기 때문에 각 margin 값을 -로 넣어줘도 위치가 이동 됩니다. 여기에서 margin을 사용한다면, margin: -100px 0 0 -150px; 또는 margin-top: -100px; margin-left: -150px; 을 넣어도 됩니다.

.exit 라는 클래스명을 부여받은 div는 닫기 버튼입니다. 위치에 대한 설명은 방금 위에서 설명한 #popmenu의 내용과 거의 일치합니다. 여기까지 완료 되셨다면 바로 미리보기 화면을 띄워 보시기 바랍니다.

보시는 것 처럼 이렇게 출력이 될 것입니다. 하지만 눌러도 변화는 없습니다. 왜냐하면 클릭했을 때의 이벤트 발생에 대한 스크립트를 만들어주지 않았기 때문입니다. 스크립트에 대한 내용은 아래와 같습니다. 여기에서는 내부 스크립트 방식으로 했습니다.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>

    //<![CDATA[

    $(document).ready(function() {

        $("#contents").click(function() {

            $("#popup").fadeIn();

        });

        $(".exit").click(function() {

            $("#popup").fadeOut();

        });

    });

    //]]>

</script>

아시다시피 제이쿼리(jQuery) 파일이 링크방식으로 연결되어 있거나 파일을 저장해 두셔야 이 스크립트가 작동합니다. 여기에서는 링크로 걸어두었습니다. 클릭 이벤트에 대해서 #contents 라고 하는 id 값을 가진 div를 클릭하게 되면, #popup 이라고 하는 id 값을 가진 div를 fadeIn 방식으로 출력하게 되고, .exit 라고 하는 class 값을 가진 div를 클릭하게 되면 #popup id 값을 가진 div가 fadeOut 한다는 스크립트 내용 입니다.

완성된 모습입니다. 이렇게 만드시면 됩니다. 여기서 추가 설명을 하자면 꼭 닫기 버튼을 눌러서 종료하는것이 아닌, 그냥 아무 화면이나 누르면 팝업창이 닫히게 하는 것 또한 간단하게 수정할 수 있습니다.

$("#popup").click(function(){

    $("#popup").fadeOut();

});

보시는 것 처럼, .exit 대신 #popup을 넣었습니다. 왜냐하면 전체창 형태의 팝업이다보니 현재 화면에 보이는 모든 영역은 #popup 입니다. 그러니 아무곳이나 클릭해도 #popup 내부에 속하기 때문입니다. 이런 내용을 참고하시어 멋진 팝업창을 만들어 보시기 바랍니다. 끝.