인터넷정보

팝업창 소스 제작기

알 수 없는 사용자 2007. 10. 18. 14:05
<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>
<body onload="document.gen_popup.code_name.focus();">
<!-- 폼 구성 부분 //-->
<form name="gen_popup">
<table border="0" width="500" cellspacing="0" cellpadding="0">
<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>
반응형