겉바속촉

[html] 자바스크립트- popup창 생성하기 본문

IT일기(하반기)/HTML

[html] 자바스크립트- popup창 생성하기

겉바속촉 2020. 6. 11. 16:07
728x90
반응형

이번에는 popup창을 만들어보도록 할게요!!

 

 

1. 자바스크립트 소스 파일 생성!

 

2. function 작성

 

 

window. open( url, 이름, 스펙) --->이렇게 해주시면 됩니다:)

pop1과 pop2에 대해서 function 만들어주세요

 

pop1은 갖고있는 이미지가 뜰 수 있도록

pop2는 naver사이트로 이동될 수 있도록

 

만들고 싶습니다:)

코드와 함께 확인해주세요~

 

 

 

 

 

popup.js

 

/**
 * 
 */

//웹브라우져 새창열때 가장 간단(url, 이름, 스펙)
function pop1()
{
window.open('../image/popup3.jpg','Event','width=430,height=430,scrollbar=yes,status=no');
	
}

function pop2()
{
window.open('https://www.naver.com/','Naver','width=430,height=430,scrollbar=yes,status=no')
	
}

 

 

 

그리고 html파일 하나 생성한 후에 

다음과 같이 작성해주세요:)

 

 

popup_12.html

 

ol & li 활용해서 넣어줄건데요:)

여기서 포인트는 아까 작성해두었던 popup.js를 가지고 와야한다는 점입니다

 

<script type="text/javascript"></script> --------> 이 부분에다가

src="pop.js" -----> 추가해줄 부분

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>

<ol>
	<li>
		<a href="#" onclick="pop1()">공지사항</a>
	</li>
	
	<li>
		<a href="#" onclick="window.open('http://www.nate.com','nate','width = 430 height = 430')">뉴스</a>
	</li>
	
	<li>
		<a href="#" onclick="pop2()">이벤트</a>
	</li>
	

</ol>

</body>
</html>

 

결과

 

1. 공지사항 누르면

 

지정해준 팝업창 뜹니다

2. 뉴스 누르면

 

nate 지정해주었기 때문에 nate가 뜹니다

3. 이벤트 누르면

 

 

728x90
반응형
저작자표시 비영리 변경금지

'IT일기(하반기) > HTML' 카테고리의 다른 글

[html] onchange로 페이지이동하기  (0) 2020.06.11
[html] 마우스 이벤트 객체, id값 지정한곳에 출력  (0) 2020.06.11
[html] 자바스크립트-수강신청  (0) 2020.06.11
[html]자바스크립트-함수불러오기  (0) 2020.06.11
[html] 자바스크립트-함수  (0) 2020.06.11
'IT일기(하반기)/HTML' Related Articles more