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

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




우선 팝업창 링크를 걸어줄 <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:함수명() 을 경로로 지정해주면 됩니다.



이렇게 해서 실행을 시키면


이렇게 화면이 출력이 되고


팝업버튼을 클릭할 경우


팝업창이 출력이 됩니다.





참쉽죠?


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

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



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


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


'코딩 > Javascript' 카테고리의 다른 글

[javascript]자바스크립트로 팝업창 만들기  (0) 2018.12.24

진짜 너무나도 귀찮음에도 불구하고 다시 블로그를 시작하려고 합니다.
공부할 땐 공부하느라 바빠서 못하고 취업하고 나니 일하느라 바빠서 못하고
회사 입사 2달 반도 안돼서 운 좋게 팀장으로 초고속 승진하고


한 번에 너무 많은 것들을 배우고 있어서 배운 거 정리도 할 겸 다시 코딩 쪽으로 포스팅을 하나둘씩 시작해보려고 합니다.

코딩쪽으로 궁금한게 있으신분들은 댓글 남겨주시면 아직 부족하지만 아는선에서 성심성의껏 답변해드리겠습니다 ㅇ_ㅇ



열심히 해서 초대장 나오면....그것도 열심히 뿌려보도록하겠습니다 ㅇ_ㅇ



'잡설 > 일상의 개소리' 카테고리의 다른 글

블로그 복귀  (1) 2018.10.18
북한 석탄 환적ㅡㅡ  (0) 2018.07.18
월급날이 다가온다  (0) 2018.07.11
익숙함에 속아 내일이 월요일임을 잊지 말자  (0) 2018.07.08
블로그 토탈 7만 돌파  (0) 2018.07.08
칠월 칠일  (0) 2018.07.07
블로그  (0) 2018.07.06
출퇴근 헬  (0) 2018.07.04
취업  (0) 2018.07.03
  1. Favicon of https://semiye.com 세미예 2018.10.19 09:28 신고

    앞으로 활동 기대할께요.

+ Recent posts

Statistics Graph