html로 여백없이 팝업창 만들기 내공20
비공개
질문 910건 질문마감률38.5%
2013.05.13. 13:01
추천 수 0
답변
1
조회
589

클릭하면 팝업으로 뜰 이미지는 우선 호스팅에 올려서 주소를 생성하고

그냥 메모장에 <img src="이미지주소">를 입력하고 html로 저장했습니다.

 

그리고 포토샵 슬라이스 툴로 선택한 이미지에 아까 저장한 html 팝업창 주소를 입력했습니다.

그리고 또 이 파일을 html로 저장했습니다. html창을 열고 이미지를 클릭하니 팝업창이 뜨긴 뜨는데

주소표시줄과 하얀여백 그대로 뜨네요. ㅠㅠ

 

여백없이 창에 딱 맞게 그리고 스크롤도 생성되게 화면 가운데 뜨게 하려면 html을 어떻게 작성해야 하나요?

그냥 메모장에  <img src="이미지주소">를 입력하고 저장하면 안되는 거겠죠?

html을 어떻게 작성해야 팝업창이 예쁘게 뜰지 알려주세요 고수님들!

 >

슬픈향기(eldoradoh)님의 답변입니다.

채택답변수1,168
2013.05.13. 13:09


질문자 인사

답변 내용이 많은 도움 되었습니다.


팝업창을 이미지로 그냥 띄우는 것은 상당히 위엄한 일입니다.

 

팝업창 띄울 때 팝업창 크기는. 이미지 크기로 띄우세요.

예를 들어서. 이미지 크기가 가로 500px, 세로200px이라면.

 

window.open("팝업창페이지주소", "팝업창이름영문으로", "width=500, height=200");

 

 

 

팝업창 띄우실 페이지를 아래와 같이 작성하세요.

<html>

<head>

<title></title>

<style type="text/css">

body {margin:0; padding:0;}

img {border:0; vertical-align:top;}

</style>

</head>

<body>

<img src="이미지주소" width="넓이" height="높이" alt="이미지설명" />

</body>

</html>

=========================================================

http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=10501&docId=123265364&qb=7Yyd7JeF7LC966eM65Ok6riw&enc=utf8&section=kin.qna&rank=5&search_sort=0&spq=0

팝업 창 만들기 [내공100] 내공100

cut****
질문 38건 질문마감률100%
2011.01.12. 11:20
추천 수 3
답변
1
조회
4,199


안녕하세요.

 

팝업창을 포토샵으로 만들긴 만들었는데,

인터넷 검색을 통해서 이래저래 다음카페 메인에 소스를 넣어서

 

카페 접속시 팝업창이 뜨게 했어요... (어떻게 했는지 기억이 안남 ㅜㅜ)

 

근데 이게 포토샵으로 클릭하면 정보가 있는 곳으로 이동하게 만들고 했는데요,

 

클릭도 안되고, 오늘 하루 이창 열지 않기(?) 이말이 맞으려나...

 

아무튼 이 말을 체크하거나 누르면 팝업창이 하루동안 뜨지 않게 하는 것도 추가해서 넣고 싶은데요..

 

하는방법도 모르겠고, 너무 복잡해요 ㅠㅠ

 

간단하게 알려주실분 부탁합니다 ㅠㅠ

 

 

 

↑ 이게 만든 팝업창인데, 자세한 사항은 공지사항에서 확인하세요! 이 부분을 클릭이 되게 하구싶구요..

 

만든 팝업창 아래에 이 창을 하루동안 열지 않음 << 이 문구도 추가하고 싶어요!

 

이 두가지 알려주세요ㅠㅠ 감사합니다!!


1번째 답변
질문자 채택

hika26님의 답변입니다.

채택답변수4
2011.01.12. 17:55

질문자 인사

빠른 답변 완전 감사해요!

그림에서 그부분만 링크를 넣으려면 포토샵을 이용해야 하는데

그러면 복잡해 지니까

이미지 자체에 링크를 넣는게 더 좋겠네요.^^

 

 

 

부모창의 <head> 와 </head> 사이에 삽입하세요.

 

<script language="javascript">
 
// 이부분부터  수정할 필요 없습니다. 
function getCookie(name) {
var Found = false
var start, end
var i = 0
 
while(i <= document.cookie.length) {
start = i
end = start + name.length
 
if(document.cookie.substring(start, end) == name) {
Found = true
break
}
i++
}
 
if(Found == true) {
start = end + 1
end = document.cookie.indexOf(";", start)
if(end < start)
end = document.cookie.length
return document.cookie.substring(start, end)
}
return ""
}
// 이부분 까지는 수정할 필요 없습니다. 
 
function openPopup()
{
var noticeCookie=getCookie("CookieName");  // 쿠키네임 지정
if (noticeCookie != "no")
window.open('
oncepopup2.html','pop','width=350,height=400,top=50,left=150');
// window.open('
팝업창 웹페이지주소','윈도우명','width=350,height=400,top=50,left=150'); 
}
openPopup();  // 자동으로 팝업 띄우기
</SCRIPT>

 

 

 

 

팝업창의 <head>와 </head>에 추가해주세요.

 

<script language="JavaScript">  
function setCookie( name, value, expiredays )
{
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
 
function closeWin()  {
{
if ( document.cnjform.notice.checked )  // 폼네임 cnjform 은 동일해야 합니다.
setCookie("CookieName", "no" , 1);   // 부모창에서 지정한 쿠키네임과 일치 해야 합니다.
}
top.close();
}
</script>

 

 

 

팝업창의 <body> 와 </body>에 추가해주세요.

 

<table border="1" cellspacing="0" width="276" bordercolor="#FCB0D8" bordercolordark="white" bordercolorlight="#66CCFF">
    <tr>
        <td width="270" height="25" bgcolor="#FFE6F2">
            <p align="center"><span style="font-size:9pt;"><img src="1202.gif" align="absmiddle" width="30" height="17" border="0">
            <font color="red"><b> 공지사항 </b></font><img src="1202.gif" align="absmiddle" width="30" height="17" border="0"></span></p>
        </td>
    </tr>
    <tr>
        <td width="270" height="259">
            <p align="center"><span style="font-size:9pt;">여기다가 공지사항을
            <br>쓰시면 됩니다.</span></p>
        </td>
    </tr>    <tr>
<td width="270" height="9" bgcolor="#99CCFF">
<form name="cnjform">
                <p align="center"><span style="font-size:9pt;"><input type="checkbox" name="notice" onclick="closeWin()"> 오늘 하룻동안 페이지를 열지 않습니다.</span>
</form>

       </td>
    </tr>
</table>

=================================

http://uiandwe.tistory.com/164

[홈페이지 만들기 3] 팝업창 띄우기

os/리눅스 2009.12.06 07:09
-_-밑도 끝도 없이 팝업부터 시작할련다..왜? 멋지잔다..-_-ㅋㅋ

일단은 index.html 에 소스를 추가! 

<script language="javascript"> 

// 이부분부터  수정할 필요 없습니다. 
function getCookie(name) { 
var Found = false 
var start, end 
var i = 0 

while(i <= document.cookie.length) { 
start = i 
end = start + name.length 

if(document.cookie.substring(start, end) == name) { 
Found = true 
break 
i++ 

if(Found == true) { 
start = end + 1 
end = document.cookie.indexOf(";", start) 
if(end < start) 
end = document.cookie.length 
return document.cookie.substring(start, end) 
return "" 
// 이부분 까지는 수정할 필요 없습니다. 

function openPopup() 
var noticeCookie=getCookie("CookieName");  // 쿠키네임 지정
if (noticeCookie != "no") 
window.open('pop.html','pop','width=320,height=570,top=50,left=150'); 
// window.open('팝업창 웹페이지','윈도우명','width=350,height=400,top=50,left=150'); 
openPopup();  // 자동으로 팝업 띄우기
</SCRIPT> 

담엔 pop.html을 만들어서 소스 추가!

<html>
<head>
</head>
<script language="JavaScript">  
<!--
function setCookie( name, value, expiredays ) 
var todayDate = new Date(); 
todayDate.setDate( todayDate.getDate() + expiredays ); 
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";" 
function closeWin()  {
if ( document.myform.notice.checked )  // 폼네임 myform 은 동일해야 합니다.
setCookie("CookieName", "no" , 1);   // 부모창에서 지정한 쿠키네임과 일치 해야 합니다.
top.close();
}
-->
</script>

<form name="myform"> 
<input type="checkbox" name="notice" onclick="closeWin()">오늘 하룻동안 페이지를 열지 않습니다 
</form>
<body>

<body background = "3.jpg">
<image src=popup.JPG> 
</body>
</html>

팝업창인것을 더 확연하게 보여주기 위해 그림을 몇개 넣어주었따~(타 사이트에서 따왓음)
 이제 index.html을 열어 보면은 팝업창이 근사하게 뜬다~



=============================================================== 

2015년 고용·산재보험 보험료 신고 및 납부안내

고용산재보험 토탈서비스
[닫기]



<!DOCTYPE html>

<html lang="ko">
<head>

<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximun-scale=1.0,minimun-scale=1.0"/>
<meta name="description" content=""/>
  
<title>2016년 고용·산재보험 보험료 신고 및 납부안내</title>

<link rel="stylesheet" href="/ei/css/common.css" />
<link rel="stylesheet" href="/ei/css/print.css" media="print" />

<script>
window.onload = function() {
 var width = window.document.body.clientWidth;
 var height = window.document.body.clientHeight;
 
 if(width > 460+4 || height > 300+4){
  window.resizeTo(460, 300);
 }
}

//<![CDATA[
function setCookie( name, value, expiredays ) {
 var today = new Date();
 today.setDate( today.getDate() + expiredays );
 document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + today.toGMTString() + ";";
}

function closewin() {
 setCookie("ei_popup_3", "N", 1);
 window.close();
}
//]]>
</script>

</head>

<!-- <body>
  <h1 class="hidden">공지사항</h1>
   <div id="popContent2">
    <div class="page">
     <div class="usualpop">
      <img src="/ei/images/popup/090903_CS(ei_out).gif" alt=" " />
     </div>
     <div class="nomoreinfo nminfo2">
      <div>
       <input type="checkbox" id="nomore"><label for="nomore" class="ml5">오늘 하루 이 창을 열지않습니다.</label>
      </div>
      <a href="#">[닫기]</a>
     </div>
    </div>
   </div>
  
</body> -->
<body>
<h1 class="hidden">2015년 고용·산재보험 보험료 신고 및 납부안내</h1> <div id="popContent2">
  <div class="page">
   <div class="usualpop">
    <a href="http://www.kcomwel.or.kr" target="_blank"><img src="/ei/images/popup/popup_150304.jpg" alt="고용산재보험 토탈서비스" title="2015년 고용·산재보험 보험료 신고 및 납부안내" width="460" height="270"/></a>
   </div>
   <div class="nomoreinfo nminfo2">
    <div>
     <input type="checkbox" id="nomore" onClick="closewin()"><label for="nomore" class="ml5">오늘 하루 이 창을 열지않습니다.</label>
    </div>
    <a href="#" onclick="self.close();">[닫기]</a>
   </div>
  </div>
 </div>

</body>

</html>
======================================================

이 게시물을..