<html>
<head>
<title>Four Exciting Ways to Use the Popup Object</title>
<LINK REL="stylesheet" HREF="../../../samples.css" TYPE="text/css">
<script>
var oPopup = window.createPopup();
function richDropDown()
{
oPopup.document.body.innerHTML = oContextHTML.innerHTML;
oPopup.show(0, 28, 305, 100, dropdowno);
}
function richToolTip()
{
var lefter = event.offsetY+0;
var topper = event.offsetX+15;
oPopup.document.body.innerHTML = oToolTip.innerHTML;
oPopup.show(topper, lefter, 170, 120, ttip);
}
function richDialog()
{
oPopup.document.body.innerHTML = oDialog.innerHTML;
oPopup.show(100, 50, 400, 300);
}
function richContext()
{
var lefter2 = event.offsetY+0;
var topper2 = event.offsetX+15;
oPopup.document.body.innerHTML = oContext2.innerHTML;
oPopup.show(topper2, lefter2, 210, 88, contextobox);
}
</script>
</head>
<body>
<h1>Four Exciting Uses of the Popup Object</h1>
<BR>
<b style="margin-top:15px;">1. Custom Context Menus</b><br><br>
<div style="">Context menus are accessed by clicking the right mouse button. Usually this displays a default context menu. Now you can create a customized context menu with the popup object.</div>
<br>
<span id="contextobox" style=" cursor:hand; margin-left:5px; margin-right:10px; background:#e4e4e4; width:300; height:40; padding:20px;" oncontextmenu="richContext(); return false" >Right-click inside this box.</span>
<BR><BR>
<hr size="1">
<BR>
<b style="width:550px">2. Custom Menus</b>
<br>
<div style="">Creating custom menus is easy with the popup object. In the following example, the drop-down menu uses a gradient filter on each option and has a color scroll bar. Click the drop-down menu and then move the cursor over the options to see these effects.</div>
<br>
<div id="dropdowno" style="background:#3366CC; padding:5px; border-bottom:1px solid black; border-top:1px solid #99CCFF; font:bold 10pt tahoma; color:white; width:300px" ><span style="cursor:hand; margin-left:5px; margin-right:10px;" onmousedown="richDropDown()" >Click here for a custom drop-down <img src="../../../../graphics/UI_droparrow.gif" align="absmiddle" style=""></span></div>
<BR>
<hr size="1">
<b style="margin-top:15px; width:550px">3. Custom Message Boxes</b>
<br>
<div style="">All types of interactive message boxes can be easily created with the popup object. Click the button below.</div><br>
<Button style="cursor:hand; margin-left:5px; margin-right:10px;" onmousedown="richDialog()" > Click Me</button><br>
<BR>
<hr size="1">
<b style="margin-top:15px; width:550px">4. Custom ToolTips</b>
<br>
<div style="">Using the popup object, web pages can now have ToolTips that are as dynamic as the pages themselves. In the following example, the popup object's position depends on where the mouse pointer is when the ToolTip is activated. Move the cursor over the green text to display a ToolTip.</div><br>
Using <span id="ttip" style="width:120;color:green; cursor:hand; font-weight:bold" onmouseover="richToolTip()" onmouseout="oPopup.hide()" >Custom ToolTips</span> enhance the web experience.
<br>
<br>
<br>
<br>
<DIV ID="oContextHTML" STYLE="display:none;">
<div style="position:absolute; top:0; left:0; overflow:scroll; overflow-x:hidden; width:300; height:100; scrollbar-base-color:#3366CC; border-bottom:2px solid black; SCROLLBAR-HIGHLIGHT-COLOR: #99CCFF; SCROLLBAR-ARROW-COLOR: white;" >
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; filter:;">
<SPAN ONCLICK="parent.location.href='http://msdn.microsoft.com'">
Custom Drop-Down Item 1</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=yellowgreen, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 2</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 3</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=violet, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 4</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 5</SPAN>
</DIV>
</div>
</DIV>
<DIV ID="oDialog" STYLE="display:none;">
<div id="myid" style="position:absolute; top:0; left:0; width:100%; height:100%; background:#cccccc; border:1px solid black; border-top:1px solid white; border-left:1px solid white; padding:10px; font:normal 10pt tahoma; padding-left:18px "> <b>Rich Message Boxes</b><hr size="1" style="border:1px solid black;"><div style="width:220px; font-family:tahoma; font-size:80%; line-height:1.5em"><br>
This message box is written entirely in Dynamic HTML (DHTML) using Cascading Style Sheets (CSS). You can dynamically change properties of this message box. For instance, click the button below to change the color of the popup object.
<br>
<br>
<br>
<button style="background:#cccccc" onclick="myid.style.backgroundColor='#3366CC';" tabindex="-1">Change Color</button>
</div>
<br>
<br>
<button tabindex="-1" onclick="parent.oPopup.hide();" style="border:1px solid black; border-left:1px solid white; border-top:1px solid white; background:#cccccc ">Close Message</button>
</DIV>
<div style="position: absolute; top:50; left:250px; width:125px; height:200px; border:1px solid black; border-bottom:1px solid white; border-right:1px solid white; font:normal 10pt tahoma; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px" >
<b>DHTML Content</b><hr size="1" style="border:1px solid black;">It's easy to put content in a custom message box
</div></div>
</DIV>
<DIV ID="oToolTip" STYLE="display:none;">
<div style="position: absolute; top:0; left:0; width:100%; height:100%; border:2px solid black; font:normal 10pt tahoma; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px" >
<b>Custom ToolTips</b><hr size="1" style="border:1px solid black;">Now you can create ToolTips that are enhanced by DHTML.
</div>
</DIV>
<DIV ID="oContext" STYLE="display:none;">
<div style="position: absolute; top:0; left:0; width:100%; height:100%; border:2px solid black; font:normal 10pt tahoma; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px" >
<b>Custom ToolTips</b><hr size="1" style="border:1px solid black;">Now you can create ToolTips that are enhanced by DHTML.
</div>
</DIV>
<DIV ID="oContext2" STYLE="display:none">
<DIV STYLE="position:relative; top:0; left:0; border:2px solid black; border-top:2px solid #cccccc; border-left:2px solid #cccccc; background:#666666; height:110px; width:207px;">
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='iframe4popup.htm';">
<IMG SRC="img/home.gif" ALIGN="absmiddle"> Home</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://search.microsoft.com';">
<IMG SRC="img/search.gif" ALIGN="absmiddle"> Search</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://www.microsoft.com/ie';">
<IMG SRC="img/ielogo.gif" ALIGN="absmiddle"> Intenet Explorer</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://www.microsoft.com/info/cpyright.htm';">
©2001 Microsoft Corporation</DIV>
</DIV>
</body>
</html>
<head>
<title>Four Exciting Ways to Use the Popup Object</title>
<LINK REL="stylesheet" HREF="../../../samples.css" TYPE="text/css">
<script>
var oPopup = window.createPopup();
function richDropDown()
{
oPopup.document.body.innerHTML = oContextHTML.innerHTML;
oPopup.show(0, 28, 305, 100, dropdowno);
}
function richToolTip()
{
var lefter = event.offsetY+0;
var topper = event.offsetX+15;
oPopup.document.body.innerHTML = oToolTip.innerHTML;
oPopup.show(topper, lefter, 170, 120, ttip);
}
function richDialog()
{
oPopup.document.body.innerHTML = oDialog.innerHTML;
oPopup.show(100, 50, 400, 300);
}
function richContext()
{
var lefter2 = event.offsetY+0;
var topper2 = event.offsetX+15;
oPopup.document.body.innerHTML = oContext2.innerHTML;
oPopup.show(topper2, lefter2, 210, 88, contextobox);
}
</script>
</head>
<body>
<h1>Four Exciting Uses of the Popup Object</h1>
<BR>
<b style="margin-top:15px;">1. Custom Context Menus</b><br><br>
<div style="">Context menus are accessed by clicking the right mouse button. Usually this displays a default context menu. Now you can create a customized context menu with the popup object.</div>
<br>
<span id="contextobox" style=" cursor:hand; margin-left:5px; margin-right:10px; background:#e4e4e4; width:300; height:40; padding:20px;" oncontextmenu="richContext(); return false" >Right-click inside this box.</span>
<BR><BR>
<hr size="1">
<BR>
<b style="width:550px">2. Custom Menus</b>
<br>
<div style="">Creating custom menus is easy with the popup object. In the following example, the drop-down menu uses a gradient filter on each option and has a color scroll bar. Click the drop-down menu and then move the cursor over the options to see these effects.</div>
<br>
<div id="dropdowno" style="background:#3366CC; padding:5px; border-bottom:1px solid black; border-top:1px solid #99CCFF; font:bold 10pt tahoma; color:white; width:300px" ><span style="cursor:hand; margin-left:5px; margin-right:10px;" onmousedown="richDropDown()" >Click here for a custom drop-down <img src="../../../../graphics/UI_droparrow.gif" align="absmiddle" style=""></span></div>
<BR>
<hr size="1">
<b style="margin-top:15px; width:550px">3. Custom Message Boxes</b>
<br>
<div style="">All types of interactive message boxes can be easily created with the popup object. Click the button below.</div><br>
<Button style="cursor:hand; margin-left:5px; margin-right:10px;" onmousedown="richDialog()" > Click Me</button><br>
<BR>
<hr size="1">
<b style="margin-top:15px; width:550px">4. Custom ToolTips</b>
<br>
<div style="">Using the popup object, web pages can now have ToolTips that are as dynamic as the pages themselves. In the following example, the popup object's position depends on where the mouse pointer is when the ToolTip is activated. Move the cursor over the green text to display a ToolTip.</div><br>
Using <span id="ttip" style="width:120;color:green; cursor:hand; font-weight:bold" onmouseover="richToolTip()" onmouseout="oPopup.hide()" >Custom ToolTips</span> enhance the web experience.
<br>
<br>
<br>
<br>
<DIV ID="oContextHTML" STYLE="display:none;">
<div style="position:absolute; top:0; left:0; overflow:scroll; overflow-x:hidden; width:300; height:100; scrollbar-base-color:#3366CC; border-bottom:2px solid black; SCROLLBAR-HIGHLIGHT-COLOR: #99CCFF; SCROLLBAR-ARROW-COLOR: white;" >
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; filter:;">
<SPAN ONCLICK="parent.location.href='http://msdn.microsoft.com'">
Custom Drop-Down Item 1</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=yellowgreen, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 2</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 3</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=violet, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 4</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 5</SPAN>
</DIV>
</div>
</DIV>
<DIV ID="oDialog" STYLE="display:none;">
<div id="myid" style="position:absolute; top:0; left:0; width:100%; height:100%; background:#cccccc; border:1px solid black; border-top:1px solid white; border-left:1px solid white; padding:10px; font:normal 10pt tahoma; padding-left:18px "> <b>Rich Message Boxes</b><hr size="1" style="border:1px solid black;"><div style="width:220px; font-family:tahoma; font-size:80%; line-height:1.5em"><br>
This message box is written entirely in Dynamic HTML (DHTML) using Cascading Style Sheets (CSS). You can dynamically change properties of this message box. For instance, click the button below to change the color of the popup object.
<br>
<br>
<br>
<button style="background:#cccccc" onclick="myid.style.backgroundColor='#3366CC';" tabindex="-1">Change Color</button>
</div>
<br>
<br>
<button tabindex="-1" onclick="parent.oPopup.hide();" style="border:1px solid black; border-left:1px solid white; border-top:1px solid white; background:#cccccc ">Close Message</button>
</DIV>
<div style="position: absolute; top:50; left:250px; width:125px; height:200px; border:1px solid black; border-bottom:1px solid white; border-right:1px solid white; font:normal 10pt tahoma; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px" >
<b>DHTML Content</b><hr size="1" style="border:1px solid black;">It's easy to put content in a custom message box
</div></div>
</DIV>
<DIV ID="oToolTip" STYLE="display:none;">
<div style="position: absolute; top:0; left:0; width:100%; height:100%; border:2px solid black; font:normal 10pt tahoma; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px" >
<b>Custom ToolTips</b><hr size="1" style="border:1px solid black;">Now you can create ToolTips that are enhanced by DHTML.
</div>
</DIV>
<DIV ID="oContext" STYLE="display:none;">
<div style="position: absolute; top:0; left:0; width:100%; height:100%; border:2px solid black; font:normal 10pt tahoma; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px" >
<b>Custom ToolTips</b><hr size="1" style="border:1px solid black;">Now you can create ToolTips that are enhanced by DHTML.
</div>
</DIV>
<DIV ID="oContext2" STYLE="display:none">
<DIV STYLE="position:relative; top:0; left:0; border:2px solid black; border-top:2px solid #cccccc; border-left:2px solid #cccccc; background:#666666; height:110px; width:207px;">
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='iframe4popup.htm';">
<IMG SRC="img/home.gif" ALIGN="absmiddle"> Home</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://search.microsoft.com';">
<IMG SRC="img/search.gif" ALIGN="absmiddle"> Search</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://www.microsoft.com/ie';">
<IMG SRC="img/ielogo.gif" ALIGN="absmiddle"> Intenet Explorer</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://www.microsoft.com/info/cpyright.htm';">
©2001 Microsoft Corporation</DIV>
</DIV>
</body>
</html>
댓글 0
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 18 | Applet 에서 JavaScript 를 호출 | 박상현 | 2003.10.13 | 2414 |
| 17 | 색상표 | 박상현 | 2003.10.10 | 1771 |
| 16 | [javascript]textarea의 내용을 클립보드에 담아 처리하기 | 박상현 | 2003.10.09 | 3679 |
| 15 | [제로보드] 일반페이지 인증하기 | 박상현 | 2003.10.09 | 1967 |
| 14 | 시간안에 응답하지 않는함수는 에러(혹은 exception)처리 | 박상현 | 2003.10.08 | 2046 |
| 13 | 자바스크립트사용시 주의점 | 운영자 | 2003.10.06 | 1899 |
| 12 | excel로 자료 출력 | 운영자 | 2003.10.06 | 2387 |
| 11 | batch 작업 | 박상현 | 2002.02.13 | 2020 |
| 10 | 수정된 StringTokenizer | 박상현 | 2001.12.17 | 2579 |
| 9 | java에서 system의 property확인 jsp파일 | 박상현 | 2001.10.27 | 2358 |
| 8 | 프리페어스테이트먼트에 ? 표 자리에 값을 셋팅후 만들어진 SQL 문을 보는 유틸 | 운영자 | 2003.09.18 | 3391 |
| 7 | RAS암호 시스템의 구현 | 박상현 | 2001.10.16 | 3232 |
| 6 | JCE정보 보는 소스 | 박상현 | 2001.10.16 | 2399 |
| 5 | 테두리및 가로줄, 세로줄이 1px인 테이블 만들기 | 운영자 | 2003.10.01 | 2531 |
| 4 | table 외곽에 테두리만 1pixel로 만들기 | 운영자 | 2003.10.01 | 2249 |
| 3 | BB설명 | 운영자 | 2003.09.26 | 2159 |
| 2 | 창닫기 전에 물어보기 | 운영자 | 2003.09.26 | 2574 |
| » | popup창 띄우는 4가지 방법 | 운영자 | 2003.09.24 | 4004 |