스크립트
< 자료공유 < 스크립트
스크립트자료실

팝업창 생성기

페이지 정보

작성일13-02-06 16:01 조회1,433회

본문

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc_kr">
<title>팝업창 만들기</title>
<link rel="stylesheet" href="style.css" type="text/css">
<head>
<script language="javascript">
<!--
function code_view() {
// 각 폼의 입력값을 읽어들임
var value_a = document.gen_popup.code_name.value;
var value_b = document.gen_popup.page_path.value;
var value_c = document.gen_popup.popup_name.value;
var value_d = document.gen_popup.width_size.value;
var value_e = document.gen_popup.height_size.value;
var value_f = document.gen_popup.left_size.value;
var value_g = document.gen_popup.top_size.value;
var value_h = document.gen_popup.scroll_ynn.options[document.gen_popup.scroll_ynn.selectedIndex].value;
var value_i = document.gen_popup.resize_ynn.options[document.gen_popup.resize_ynn.selectedIndex].value;
var value_j = document.gen_popup.fun_name.value;
// 각 체크박스의 체크를 읽어들임
var check_a = document.gen_popup.tool_cnu.checked;
var check_b = document.gen_popup.loca_cnu.checked;
var check_c = document.gen_popup.stat_cnu.checked;
var check_d = document.gen_popup.menu_cnu.checked;
// check_a가 체크상태라면
if(check_a == true)
var opt_a = ',toolbar=yes'; // 툴바를 사용하고
else // 언체크 상래라면
var opt_a = ''; // 툴바를 사용하지 않는다.
if(check_b == true)
var opt_b = ',location=yes'; // 주소창을 사용
else
var opt_b = '';
if(check_c == true)
var opt_c = ',status=yes'; // 상태바를 사용
else
var opt_c = '';
if(check_d == true)
var opt_d = ',menubar=yes'; // 메뉴바를 사용
else
var opt_d = '';
// 팝업 코드를 생성하는 부분
this_code = '<script language="javascript">\n';
this_code += 'function '+value_j+'() {\n';
this_code += '\t'+value_a+' = window.open(\''+value_b+'\',\''+value_c+'\',\'width='+value_d+',height='+value_e+',left='+value_f+',top='+value_g+',scrollbars='+value_h+',resizable='+value_i+''+opt_a+opt_b+opt_c+opt_d+'\');\n';
this_code += '}\n';
this_code += '</script>\n';
this_code += '팝업 열어주는 코드 : '+value_j+'()<br>\n';
this_code += '<input type="button" value="'+value_j+'" onclick="'+value_j+'();">\n';
this_code += '<input type="button" value="'+value_j+' close" onclick="window.'+value_a+'.close();">\n';
// 미리보기, 코드복사 버튼을 활성화 시킴
document.gen_popup.p_v.disabled = false;
document.gen_popup.c_c.disabled = false;
// 팝업 코드를 생성하는 부분에 적혀진 코드를 textarea에 복사함
document.gen_popup.view_code.value = this_code;
}
function prev_view() {
cpv = window.open('','code_prev_view','width=300,height=300,left=0,top=0,scrollbars=no,resizable=no');
cpv.document.focus();
cpv.document.open();
// textarea에 입력된 코드를 읽어서 팝업창에 보여줌
cpv.document.write(document.gen_popup.view_code.value+'\n\n');
cpv.document.write('<!-- 닫기버튼 코드 //-->\n');
cpv.document.write('<hr size="1" width="80%" color="#000000">\n');
cpv.document.write('<center>\n');
cpv.document.write('<input type="button" value="닫기" onclick="window.close();" style="width:50%;">\n');
cpv.document.write('</center>\n');
cpv.document.close();
}
function dis_pv() {
// 미리보기, 코드복사 버튼을 비활성화 시킴
document.gen_popup.p_v.disabled = true;
document.gen_popup.c_c.disabled = true;
}
function copy_code() {
// textarea의 코드를 클립보드로 복사하는 부분
var tempval=eval("document.gen_popup.view_code");
tempval.focus();
tempval.select();
therange=tempval.createTextRange();
therange.execCommand("Copy");
alert('소스를 클립보드에 복사했습니다.'); // 복사 완료시 메세지
}
//-->
</script>
</head>
<body onload="document.gen_popup.code_name.focus();">
<!-- 폼 구성 부분 //-->
<form name="gen_popup">
<table width="500">
<tr>
<th width="100">코드이름</th>
<td><input type="text" name="code_name"></td>
</tr>
<tr>
<th width="100">경로</th>
<td><input type="text" name="page_path"></td>
</tr>
<tr>
<th width="100">팝업이름</th>
<td><input type="text" name="popup_name"></td>
</tr>
<tr>
<th width="100">가로크기</th>
<td><input type="text" name="width_size"></td>
</tr>
<tr>
<th width="100">세로크기</th>
<td><input type="text" name="height_size"></td>
</tr>
<tr>
<th width="100">좌측값</th>
<td><input type="text" name="left_size"></td>
</tr>
<tr>
<th width="100">상단값</th>
<td><input type="text" name="top_size"></td>
</tr>
<tr>
<th width="100">스크롤바</th>
<td><select name="scroll_ynn">
<option value="no">NO
<option value="yes">YES
</select></td>
</tr>
<tr>
<th width="100">크기조절</th>
<td><select name="resize_ynn">
<option value="no">NO
<option value="yes">YES
</select></td>
</tr>
<tr>
<th width="100">함수이름</th>
<td><input type="text" name="fun_name" value="open_popup"></td>
</tr>
<tr>
<th colspan="2">
<input type="checkbox" name="tool_cnu">Toolbar
<input type="checkbox" name="loca_cnu">Location
<input type="checkbox" name="stat_cnu">Status
<input type="checkbox" name="menu_cnu">Menubar
</th>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="코드보기" onclick="code_view();">
<input type="button" value="미리보기" onclick="prev_view();" name="p_v" disabled>
<input type="button" value="코드복사" onclick="copy_code();" name="c_c" disabled>
<input type="reset" value="초기화" onclick="dis_pv();">
</td>
</tr>
<tr>
<td colspan="2"><textarea name="view_code" cols="68" rows="10"></textarea></td>
</tr>
</table>
</form>
</body>
</html>
  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기