안녕하세요.
질문이 있는데,
첨부한 이미지에 보면 로그인을 누루면 백그라운드에 로그인창 뜨면서
첨부한 이미지대로 나오려면 어떻게 해야하죠?
아시는분들 답변좀 부탁드려요~
질문이 있는데,
첨부한 이미지에 보면 로그인을 누루면 백그라운드에 로그인창 뜨면서
첨부한 이미지대로 나오려면 어떻게 해야하죠?
아시는분들 답변좀 부탁드려요~
댓글 5개
12년 전
이걸사용하세요
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>--</title>
<style>
html,body{font-size:12px;margin:0px;height:100%;}
.mesWindow{border:#666 1px solid;background:#fff;}
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}
.mesWindowContent{margin:4px;font-size:12px;}
.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}
</style>
<script>
var isIe=(document.all)?true:false;
function setSelectState(state)
{
var objl=document.getElementsByTagName('select');
for(var i=0;i<objl.length;i++)
{
objl[i].style.visibility=state;
}
}
function mousePosition(ev)
{
if(ev.pageX || ev.pageY)
{
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//튀여나오는 스타일
function showMessageBox(wTitle,content,pos,wWidth)
{
closeWindow();
var bWidth=parseInt(document.documentElement.scrollWidth);
var bHeight=parseInt(document.documentElement.scrollHeight);
if(isIe){
setSelectState('hidden');}
var back=document.createElement("div");
back.id="back";
var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";
styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;";
back.style.cssText=styleStr;
document.body.appendChild(back);
showBackground(back,50);
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow";
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='닫기' class='close' value='닫기' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";
styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";
mesW.style.cssText=styleStr;
document.body.appendChild(mesW);
}
//배경점점 검게
function showBackground(obj,endInt)
{
if(isIe)
{
obj.filters.alpha.opacity+=1;
if(obj.filters.alpha.opacity<endInt)
{
setTimeout(function(){showBackground(obj,endInt)},5);
}
}else{
var al=parseFloat(obj.style.opacity);al+=0.01;
obj.style.opacity=al;
if(al<(endInt/100))
{setTimeout(function(){showBackground(obj,endInt)},5);}
}
}
//닫기
function closeWindow()
{
if(document.getElementById('back')!=null)
{
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null)
{
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
if(isIe){
setSelectState('');}
}
function testMessageBox(ev)
{
var objPos = mousePosition(ev);
messContent="<div style='padding:20px 0 20px 0;text-align:center'>내용</div>";
showMessageBox('제목',messContent,objPos,350);
}
</script>
</head>
<body>
<div style="padding:20px">
<div style="text-align:left";><a href="#none" onclick="testMessageBox(event);">열기</a></div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>--</title>
<style>
html,body{font-size:12px;margin:0px;height:100%;}
.mesWindow{border:#666 1px solid;background:#fff;}
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}
.mesWindowContent{margin:4px;font-size:12px;}
.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}
</style>
<script>
var isIe=(document.all)?true:false;
function setSelectState(state)
{
var objl=document.getElementsByTagName('select');
for(var i=0;i<objl.length;i++)
{
objl[i].style.visibility=state;
}
}
function mousePosition(ev)
{
if(ev.pageX || ev.pageY)
{
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//튀여나오는 스타일
function showMessageBox(wTitle,content,pos,wWidth)
{
closeWindow();
var bWidth=parseInt(document.documentElement.scrollWidth);
var bHeight=parseInt(document.documentElement.scrollHeight);
if(isIe){
setSelectState('hidden');}
var back=document.createElement("div");
back.id="back";
var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";
styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;";
back.style.cssText=styleStr;
document.body.appendChild(back);
showBackground(back,50);
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow";
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='닫기' class='close' value='닫기' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";
styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";
mesW.style.cssText=styleStr;
document.body.appendChild(mesW);
}
//배경점점 검게
function showBackground(obj,endInt)
{
if(isIe)
{
obj.filters.alpha.opacity+=1;
if(obj.filters.alpha.opacity<endInt)
{
setTimeout(function(){showBackground(obj,endInt)},5);
}
}else{
var al=parseFloat(obj.style.opacity);al+=0.01;
obj.style.opacity=al;
if(al<(endInt/100))
{setTimeout(function(){showBackground(obj,endInt)},5);}
}
}
//닫기
function closeWindow()
{
if(document.getElementById('back')!=null)
{
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null)
{
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
if(isIe){
setSelectState('');}
}
function testMessageBox(ev)
{
var objPos = mousePosition(ev);
messContent="<div style='padding:20px 0 20px 0;text-align:center'>내용</div>";
showMessageBox('제목',messContent,objPos,350);
}
</script>
</head>
<body>
<div style="padding:20px">
<div style="text-align:left";><a href="#none" onclick="testMessageBox(event);">열기</a></div>
</div>
</body>
</html>
Terrorboy
12년 전
모달창이라고 검색 해보세요~
12년 전
음..div 팝업에 대해서 배우시고 target= parent 이걸로 검색하시면 됩니다. 그리고 비동기 ajax쪽으로 보시면 됩니다.
skypro
12년 전
그냥 간단하게 레이어로 띄우시면 됩니다. div 하나 만들어놓고 로그인 버튼 클릭하면 레이어를 href시켜주면 될듯....^^
배경 검은색도 간단히 bg를 레이어로 하나 덮으면 간단합니다. 어렵게 처리할 필요가 없을 듯합니다 ..도움되시길
배경 검은색도 간단히 bg를 레이어로 하나 덮으면 간단합니다. 어렵게 처리할 필요가 없을 듯합니다 ..도움되시길
12년 전
여기 스킨방에서 검색해 보시면 나옵니다..참고하시길..
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6230 |
senseme
|
12년 전 | 1057 | |
| 6229 |
senseme
|
12년 전 | 1077 | |
| 6228 | 12년 전 | 4441 | ||
| 6227 |
senseme
|
12년 전 | 1495 | |
| 6226 |
senseme
|
12년 전 | 1641 | |
| 6225 | 12년 전 | 5499 | ||
| 6224 | 12년 전 | 3269 | ||
| 6223 |
kiplayer
|
12년 전 | 2140 | |
| 6222 | 12년 전 | 1301 | ||
| 6221 | 12년 전 | 3492 | ||
| 6220 | 12년 전 | 2514 | ||
| 6219 | 12년 전 | 2227 | ||
| 6218 |
senseme
|
12년 전 | 1842 | |
| 6217 |
senseme
|
12년 전 | 1532 | |
| 6216 |
senseme
|
12년 전 | 1529 | |
| 6215 |
senseme
|
12년 전 | 1283 | |
| 6214 | 12년 전 | 2397 | ||
| 6213 |
senseme
|
12년 전 | 1669 | |
| 6212 |
senseme
|
12년 전 | 1343 | |
| 6211 |
senseme
|
12년 전 | 2429 | |
| 6210 |
senseme
|
12년 전 | 1611 | |
| 6209 | 12년 전 | 2219 | ||
| 6208 | 12년 전 | 3441 | ||
| 6207 | 12년 전 | 1223 | ||
| 6206 |
senseme
|
12년 전 | 2197 | |
| 6205 | 12년 전 | 1035 | ||
| 6204 |
kiplayer
|
12년 전 | 1528 | |
| 6203 |
senseme
|
12년 전 | 2120 | |
| 6202 |
senseme
|
12년 전 | 1753 | |
| 6201 |
senseme
|
12년 전 | 4565 | |
| 6200 |
senseme
|
12년 전 | 2664 | |
| 6199 |
senseme
|
12년 전 | 2829 | |
| 6198 |
senseme
|
12년 전 | 1234 | |
| 6197 |
senseme
|
12년 전 | 8551 | |
| 6196 |
senseme
|
12년 전 | 3341 | |
| 6195 | 12년 전 | 1434 | ||
| 6194 |
 스위치79 |
12년 전 | 1289 | |
| 6193 |
senseme
|
12년 전 | 2694 | |
| 6192 |
senseme
|
12년 전 | 5363 | |
| 6191 |
senseme
|
12년 전 | 3415 | |
| 6190 | 12년 전 | 1342 | ||
| 6189 | 12년 전 | 13499 | ||
| 6188 |
웹디자인되고파
|
12년 전 | 1207 | |
| 6187 | 12년 전 | 623 | ||
| 6186 | 12년 전 | 3934 | ||
| 6185 | 12년 전 | 1472 | ||
| 6184 | 12년 전 | 9377 | ||
| 6183 | 12년 전 | 791 | ||
| 6182 |
senseme
|
12년 전 | 1239 | |
| 6181 |
senseme
|
12년 전 | 3221 | |
| 6180 |
senseme
|
12년 전 | 853 | |
| 6179 |
senseme
|
12년 전 | 1763 | |
| 6178 | 12년 전 | 3631 | ||
| 6177 | 12년 전 | 1064 | ||
| 6176 | 12년 전 | 954 | ||
| 6175 |
senseme
|
12년 전 | 5301 | |
| 6174 |
senseme
|
12년 전 | 1428 | |
| 6173 |
senseme
|
12년 전 | 752 | |
| 6172 |
senseme
|
12년 전 | 2741 | |
| 6171 |
senseme
|
12년 전 | 2484 | |
| 6170 |
senseme
|
12년 전 | 1502 | |
| 6169 |
senseme
|
12년 전 | 2928 | |
| 6168 |
senseme
|
12년 전 | 6535 | |
| 6167 | 12년 전 | 2136 | ||
| 6166 | 12년 전 | 746 | ||
| 6165 |
페이지팩트
|
12년 전 | 1904 | |
| 6164 |
네오soft
|
12년 전 | 1856 | |
| 6163 |
 엘남매아빠 |
12년 전 | 2606 | |
| 6162 | 12년 전 | 590 | ||
| 6161 |
엘남매아빠 |
12년 전 | 1690 | |
| 6160 | 12년 전 | 767 | ||
| 6159 | 12년 전 | 1777 | ||
| 6158 |
스위치79 |
12년 전 | 2681 | |
| 6157 |
sa2pan
|
12년 전 | 1244 | |
| 6156 | 12년 전 | 3891 | ||
| 6155 | 12년 전 | 9963 | ||
| 6154 | 12년 전 | 1124 | ||
| 6153 | 12년 전 | 2453 | ||
| 6152 |
생각보다몸이앞서다
|
12년 전 | 2122 | |
| 6151 | 12년 전 | 2975 | ||
| 6150 |
kiplayer
|
12년 전 | 6006 | |
| 6149 |
스위치79 |
12년 전 | 2645 | |
| 6148 | 12년 전 | 2969 | ||
| 6147 |
hwang007
|
12년 전 | 953 | |
| 6146 |
aqqasdf
|
12년 전 | 770 | |
| 6145 | 12년 전 | 1862 | ||
| 6144 | 12년 전 | 5878 | ||
| 6143 |
smwkd
|
12년 전 | 1462 | |
| 6142 | 12년 전 | 4699 | ||
| 6141 | 12년 전 | 929 | ||
| 6140 | 12년 전 | 4095 | ||
| 6139 | 12년 전 | 1240 | ||
| 6138 | 12년 전 | 1095 | ||
| 6137 |
SugarSkull
|
12년 전 | 1680 | |
| 6136 | 12년 전 | 1307 | ||
| 6135 |
한번잘해보자
|
12년 전 | 562 | |
| 6134 |
프리랜서개발자
|
12년 전 | 537 | |
| 6133 |
basaria
|
12년 전 | 20443 | |
| 6132 | 12년 전 | 505 | ||
| 6131 | 12년 전 | 1085 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기