기본 호출 방식

사용자가 OpenPopupTools 를 브라우저 페이지내에 로드 하였다면 아무때나 팝업을 호출할 수 있습니다. 기본적으로 js 파일내에서 돔을 생성해두기 때문에 제이쿼리나 자바스크립트의 로드함수를 기다릴 필요가 없습니다. 다음 코드는 팝업을 호출하는 기본 함수작성법입니다. 기본적으로 함수만 호출한 것이기에 작성된 내용이 없다고 받아들여 '내용이 없다' 라는 텍스트가 추가되어 화면에 띄워줍니다.

또한 OpenPopupTools 는 브라우저 스크롤바를 제거하지 않아 팝업이 온/오프 되는 시점에 브라우저가 흔들리지 않아 디자인을 해치지 않습니다.

<script> 
openPop() ;
</script>
내용을 작성해보아요.

팝업이 호출됨을 확인하면 성공적으로 OpenPopupTools 가 정상적으로 브라우저에서 동작한다는 것으로 간주됩니다. 그렇다면 이제 팝업내에 사용자가 원하는 내용을 추가해볼 수 있습니다. 함수 실행지점에 원하는 내용을 넣어주세요. '팝업을 띄워보아요' 라는 내용을 삽입해보겠습니다. 기본적인 호출 방식으로 내용만 작성할 경우는 단순한 알림 형태의 팝업을 띄우는 것이기 때문에 여러 버튼이 존재하지 않고 '확인' 만 가능하도록 하나의 버튼만 팝업에 호출됩니다. 하지만 사용자가 직접 옵션을 추가하는 경우의 팝업을 띄우는 경우에는 조건을 작성할 수 있기에 팝업내의 버튼은 '확인' , '취소' 의 두개의 버튼이 기본적으로 호출됩니다.

<script> 
openPop( '팝업을 띄워보아요' ) ;
</script>

작성되는 내용은 일반 텍스트로 삽입이 되지만 직업 HTML Code 로도 삽입이 가능합니다. 작성된 HTML 코드가 있다면 위와 같이 함수 실행지점에 삽입하여 팝업을 호출해볼 수 있습니다.

<div style="border: 10px solid purple; padding: 10px;">HTML코드를 넣어봅니다.</div>

라는 내용을 삽입해 보겠습니다.

<script> 
openPop( '<div style="border: 10px solid purple; padding: 10px;">HTML코드를 넣어봅니다.</div>' ) ;
</script>
제목을 바꿀 수 있어요.

기본 다이얼로그 팝업( 제목과 내용이 있는 팝업, 알럿창 ) 인 경우엔 그냥 띄우면 되지만 제목을 바꿔야 하는 경우가 있습니다. 그러한 경우 준비되어있는 옵션으로 제목을 변경할 수 있습니다. 옵션들은 키배열({ key : value }. 사전({ 사과 : apple})방식 )로 준비되어있으며 실행함수 안에 중괄호 '{ }' 를 삽입하여 작성할 수 있습니다.

(기본적으로 지원되는 옵션들을 확인하고 싶으시다면 레퍼런스 페이지 에서 확인하실 수 있습니다.)

아래의 코드와 같이 제목변경을 지원해주는 옵션 'title' 을 삽입하여 제목을 변경할 수 있습니다.

<script> 
openPop({ title : '제목을 변경해보아요' }) ;
</script>
제목과 내용을 함께 추가해보아요.

제목을 삽입한것처럼 내용도 작성할 수 있습니다. 준비되어 있는 옵션 'description' 으로 원하는 내용을 넘겨보세요. 옵션을 추가할경우는 중괄호 안에 , 로 구분지어 추가할 수 있습니다.

<script> 
openPop({
	title : '제목을 변경해보아요' ,
	description : '내용을 삽입합니다'
}) ;
</script>

옵션으로 추가되는 'description'엔 기본 내용삽입 방식과 같이 HTML Code도 삽입이 가능합니다.

<script> 
openPop({
	title : '제목을 변경해보아요' ,
	description : '<div style="border: 10px solid purple; padding: 10px;">HTML코드를 넣어봅니다.</div>'
}) ;
</script>
버튼을 커스텀 생성

알림팝업에는 꼭 '확인' 이나 '닫기' 혹은 '취소' 버튼만 존재하는 것은 아닙니다. 회원가입하기의 '화원가입하기' 버튼이나 혹은 '가입하지 않고 팝업 닫기' 처럼 사용자가 직접 작성하고 싶은 버튼이 있을 수 있습니다. 이러한 버튼이 필요할때마다 팝업의 HTML을 새로 작성하는것은 많이 까다롭고 힘든 작업입니다. OpenPopupTools 에서는 준비되어있는 옵션에 원하는 텍스트만을 추가하여 굳이 HTML을 작성하지 않아도 버튼의 동적 생성이 가능합니다.

key -> 'type' 으로 버튼의 고유 이름을,
key -> 'value' 로 버튼의 이름을 작성하여 주세요.

<script> 
openPop({
	title : '사용자 정의 팝업' ,
	description : '버튼의 개수에 상관없이 원하는 이름과 원하는 변수의 값으로 버튼을 추가할 수 있습니다.' ,
	btns : [
		{ type : 'confirm' , value : '확인버튼' } ,
		{ type : 'no_confirm' , value : '확인 안하고 닫기' } ,
		{ type : 'cancel' , value : '취소버튼' }
	]
}) ;
</script>
버튼 없애기

버튼이 없는 알림만을 위한 창을 만들 수 있습니다. 창을 닫고 싶은경우는 기본 알림창을 제외한 영역을 클릭해서 닫는 방법과 동일합니다.

<script> 
openPop({
	description : '안녕! 세상아!' ,
	btnsWrap : false
}) ;
</script>
배경 투명도 조절

알림찹업의 배경의 투명도를 제어할 수 있습니다. 단계는 0부터 1까지 이며 0에 가까울수록 투명해지며 1에 가까울수록 불투명해지게됩니다.

0 : 배경 투명도 100%
0.1 ~0.99 : 1 ~ 99%의 투명도를 가집니다.
1 : 불투명한 배경 ( 배경 투명도 0% )

<script> 
openPop({
	title : '투명도 100% 팝업' ,
	description : '배경의 투명도를 조절할 수 있습니다.' ,
	bg : 0
}) ;
</script>
<script> 
openPop({
	title : '투명도 50% 팝업' ,
	description : '배경의 투명도를 조절할 수 있습니다.' ,
	bg : 0.5
}) ;
</script>
<script> 
openPop({
	title : '투명도 0% 팝업' ,
	description : '배경의 투명도를 조절할 수 있습니다.' ,
	bg : 1
}) ;
</script>
팝업 배경 클릭 유/무

알림 팝업을 띄웠을 경우 팝업의 영역이 아닌지역을 클릭하였을때에 팝업이 닫히지 않기를 바라는 경우가 있습니다. 그러한 경우 준비된 옵션으로 팝업 외부영역의 닫기 옵션의 처리가 가능합니다. 기본적으로 옵션을 넣지 않는 경우는 옵션값은 true 로 전달됩니다.

<script> 
openPop({
	title : '외부영역 클릭가능' ,
	description : '팝업 외부영역을 클릭하게 되면 열려있는 팝업이 닫힙니다.  <br />기본적으로는 옵션을 지정하지 않아도 true값으로 존재합니다. '
	// bodyCloser : true -> 기본적으로 값을 처리 하지않거나 true 값을 지정하면 됩니다.
}) ;
</script>
<script> 
openPop({
	title : '외부영역 클릭불가' ,
	description : '팝업 외부영역을 클릭하여도 팝업이 닫히지않습니다.  <br />준비되어 있는 버튼을 클릭하여야 화면이 닫힙니다.' ,
	bodyCloser : false
}) ;
</script>
팝업 닫기 아이콘 버튼 유/무

디자인상 혹은, 필요에 따라 팝업 특정 위치에 닫기 버튼이 필요한 경우가 있습니다. 아래의 옵션으로 팝업 닫기 버튼이 추가될 수 있습니다. 기본적으로 false 를 가지고 있으며 true 값을 지정할 경우 팝업에 노출됩니다.

<script> 
openPop({
	description : '우측 상단 닫기 아이콘을 삽입할 수 있어요.' ,
	btnClose : true
}) ;
</script>
외부페이지 불러오기

단순 문자열이 아닌 이미 준비외어 있는 URL로 페이지를 가지고 오고 싶은 경우가 있습니다. 이러한 경우엔 가지고 오고 싶은 경로를 추가하여 페이지를 컨텐츠에 불러들일 수 있습니다.

단, 이러한 경우는 컨텐츠의 내용을 URL로 삽입하는것이기에 옵션 중 description 은 작동하지 않습니다.

/* load_page1.html 페이지 내부내용 ************* */

외부에서 불러온 페이지입니다.

/* load_page1.html ************* */

<script>
openPop({
	title : '외부 페이지 불러오기 part1' ,
	url : './load_page1.html' // 외부에서 불러올 테스트 페이지
}) ;
</script>

또한 외부에서 불러올 페이지내에 특정 스크립트가 존재할 경우에도 스크립트를 작성하여 넣어두어도 정상적으로 작동할 수 있도록 제작되어있습니다.

/* load_page2.html 페이지 내부내용 ************* */

외부에서 불러온 페이지입니다.
스크립트가 존재 합니다.

<button class="testBtn">btn click</button>

<script type="text/javascript">
	var testBtn = document.querySelector( 'button.testBtn' ) ;
	testBtn.addEventListener( 'click' , function (e) {
		alert( '외부 스크립트로 불러온 버튼 클릭에 성공하였습니다.' ) ;
	}) ;
</script>

/* load_page2.html ************* */

<script>
openPop({
	title : '외부 페이지 불러오기 part2' ,
	url : './load_page2.html' // 스크립트가 포함되어 있는 외부에서 불러올 테스트 페이지
}) ;
</script>
팝업 레이아웃 초기화

알림팝업을 다이얼로그 형식( 기본적으로 제목과 내용이 있는 팝업 )이 아닌 직접적으로 꾸며야 하는 경우가 있습니다. 자사의 디자인을 써야 하거나 특정 캐릭터가 들어가랴 하는 경우처럼 레이아웃이 필요없는 경우 옵션을 통해 기본틀을 없앨 수 있습니다.

/* load_page3.html 페이지 내부내용 ************* */

<style>
div.outSideBox {
	border: 10px solid purple;
	padding: 30px;
	background-color: #fff;
	width: 300PX;
	height: 200px;
}
div.outSideBox > p {
	line-height: 1.6;
	padding-bottom: 20px;
}
div.outSideBox > img.cat {
	position: absolute; left: -60px; top: -60px;
	width: 50%;
}
div.outSideBox > img.cat.before {
	left: 10%; top: -78px; z-index: -1;
}
</style>
<div class="outSideBox">
	<img class="cat" src="./cat.png" alt="">
	<img class="cat before" src="./cat.png" alt="">
	<p>
		외부에서 불러온 페이지입니다.<br />
		스크립트가 존재 합니다.
	</p>

	<button class="testBtn">btn click</button>
</div>


<script type="text/javascript">
	var testBtn = document.querySelector( 'button.testBtn' ) ;
	testBtn.addEventListener( 'click' , function (e) {
		alert( '외부 스크립트로 불러온 버튼 클릭에 성공하였습니다.' ) ;
	}) ;
</script>

/* load_page3.html ************* */

<script>
openPop({
	url : './load_page3.html' , // 외부에서 불러올 테스트 페이지
	outsideWrap : false ,
	btnsWrap : false
}) ;
</script>
콜백함수

단순히 알림만을 위한 팝업창이 아닌 팝업창이 닫힌 후 특정 프로세스를 실행해야하는 경우를 위한 콜백이 존재합니다. 만약 팝업을 그냥 닫기만을 바라는 것이 아니라면 실행함수의 마지막에 콜백함수를 삽입하여 주십시오. 콜백으로 넘겨받는 인자값으로 원하는 조건을 생성할 수 있습니다.

<script> 
openPop({
	title : '사용자 정의 팝업' ,
	description : '버튼의 개수에 상관없이 원하는 이름과 원하는 변수의 값으로 버튼을 추가할 수 있습니다.' ,
	btns : [
		{ type : 'confirm' , value : '확인' } ,
		{ type : 'no_confirm' , value : '확인 안하고 닫기' } ,
		{ type : 'cancel' , value : '닫기' }
	]
	} , function ( contents ) {

		console.log( contents.type ) ;
		console.log( contents.closeHandler ) ;
		console.log( contents.elem ) ;

		/*
		결과값을 전달받는 contents 인자는 세가지의 값을 포함하고있습니다.

		- contents.type -> 사용자가 누른 버튼이 어느것인지 타입을 반환해줍니다.
		- contents.closeHandler() -> 작업자가 원하는 조건을 마무리 후에 팝업을 닫을 수 있도록 팝업종료 함수를 반환해줍니다.
										닫기 함수를 실행해주기 전엔 팝업이 닫히지 않습니다.
		- contents.elem -> 팝업안에 생성되었던 DOM 전체를 반환해줍니다. 픽효한 조건을 생성하고싶을때 활용할 수 있습니다.
		*/
	}
) ;
</script>

팝업을 닫으며 누른버튼 :