JavaScript + Ajax 実践サンプル集 - ポップアップウィンドウ（オレンジ）

ポップアップウィンドウ（オレンジ）

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、<div>タグを使用してポップアップウィンドウを画面の右上に表示します。このウィンドウは5秒経過すると自動的に閉じます。「ASP.NET 2.0 + AJAX」をクリックすると、新規ウィンドウに「ASP.NET + AJAX」のサイトを表示します。ウィンドウのヘッダーをドラッグすると任意の場所に移動することもできます。

このサンプルを編集して試してみる

<!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>PopupWindow - Orange</title>			
<style type="text/css">
.topLeft {
  top:15px;     /* 0px */
  left:15px;    /* 0px */    
}
.topRight {
  top:15px;     /* 0px */ 
  right:15px;   /* 0px */
}

.bottomLeft {
  bottom:15px;  /* 0px */
  left:15px;    /* 0px */
}
.bottomRight {
  bottom:15px;  /* 0px */
  right:15px;   /* 0px */
}

.popupWinViolet {
  background:#D2C8DC; 
  border-right:1px solid #400080; 
  border-bottom:1px solid #400080;
  border-left:1px solid #B9AAC8; 
  border-top:1px solid #B9AAC8;  
}

.popupWinHeaderViolet { 
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFD2C8DC', EndColorStr='#FFFFFFFF');
  color:#200040;   
}

.popupWinCloseViolet { 
  color:#7D5AA0;
}

.popupWinContentViolet { 
  border-left:1px solid #7D5AA0; 
  border-top:1px solid #7D5AA0;
  border-bottom:1px solid #B9AAC8; 
  border-right:1px solid #B9AAC8;
  background:#D2C8DC; 
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFD2C8DC', EndColorStr='#FFFFFFFF'); 
}

.popupWinAnchorViolet {
  color:#200040; 
}

.popupWinParagraphViolet {
  color:#200040;
}

.popupWinGreen {
  background:#C8DCC8; 
  border-right:1px solid #008000; 
  border-bottom:1px solid #008000;
  border-left:1px solid #AAC8AA; 
  border-top:1px solid #AAC8AA; 
}

.popupWinHeaderGreen { 
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFC8DCC8', EndColorStr='#FFFFFFFF');
  color:#004000;  
}

.popupWinCloseGreen { 
  color:#5AA05A;  
}

.popupWinContentGreen { 
  border-left:1px solid #5AA05A; 
  border-top:1px solid #5AA05A;
  border-bottom:1px solid #AAC8AA; 
  border-right:1px solid #AAC8AA;
  background:#C8DCC8; 
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFC8DCC8', EndColorStr='#FFFFFFFF');
}

.popupWinAnchorGreen {
  color:#004000;  
}

.popupWinParagraphGreen {
  color:#004000;
}

.popupWinRed {
  background:#DCC8C8; 
  border-right:1px solid #800000; 
  border-bottom:1px solid #800000;
  border-left:1px solid #C8AAAA; 
  border-top:1px solid #C8AAAA; 
}

.popupWinHeaderRed { 
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFDCC8C8', EndColorStr='#FFFFFFFF');
  color:#400000;  
}

.popupWinCloseRed { 
  color:#A05A5A;  
}

.popupWinContentRed { 
  border-left:1px solid #A05A5A; 
  border-top:1px solid #A05A5A;
  border-bottom:1px solid #C8AAAA; 
  border-right:1px solid #C8AAAA;
  background:#DCC8C8; 
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFDCC8C8', EndColorStr='#FFFFFFFF');
}

.popupWinAnchorRed {
  color:#400000;  
}

.popupWinParagraphRed {
  color:#400000;  
}

.popupWinBlue {
  background:#E0E9F8; 
  border-right:1px solid #455690; 
  border-bottom:1px solid #455690; 
  border-left:1px solid #B9C9EF; 
  border-top:1px solid #B9C9EF; 
}

.popupWinHeaderBlue { 
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FFE0E9F8', EndColorStr='#FFFFFFFF');
  color:#1F336B;    
}

.popupWinCloseBlue { 
  color:#728EB8;   
}

.popupWinContentBlue { 
  border-left:1px solid #728EB8; 
  border-top:1px solid #728EB8; 
  border-bottom:1px solid #B9C9EF; 
  border-right:1px solid #B9C9EF; 
  background:#E0E9F8; 
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFE0E9F8', EndColorStr='#FFFFFFFF');
}

.popupWinAnchorBlue {
  color:#1F336B;  
}

.popupWinParagraphBlue {
 color:#1F336B;    
}

.popupWinOrange {
	background:#ff9900; 
	border-right:1px solid #000000; 
	border-bottom:1px solid #000000;
	border-left:1px solid #ffc080; 
	border-top:1px solid #ffc080;  
}

.popupWinHeaderOrange { 
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFff9900', EndColorStr='#FFfbeebb');
  color:#000000; 
}

.popupWinCloseOrange { 
  color:#804000;   
}

.popupWinContentOrange { 
  border-left:1px solid #804000; 
  border-top:1px solid #804000;
  border-bottom:1px solid #ffc080; 
  border-right:1px solid #ffc080;
  background:#ff9900; 
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFff9900', EndColorStr='#FFfbeebb');
}

.popupWinAnchorOrange {
  color:#000000; 
}

.popupWinParagraphOrange {
  color:#000000;  
}

</style>
<script type="text/javascript">
//<![CDATA[

var popupWinoldonloadHndlr = window.onload
var popupWinpopupHgt, popupWinactualHgt, popupWintmrId=-1, popupWinresetTimer;
var popupWintitHgt, popupWincntDelta, popupWintmrHide=-1, popupWinhideAfter, popupWinhideAlpha, popupWinhasFilters;
var popupWinnWin, popupWinshowBy=null, popupWindxTimer=-1, popupWinpopupBottom, popupWinoldLeft;
var popupWinnText
var popupWinNewContent,popupWinNewAnchorMsg,popupWinNewTitle,popupWinbChangeTexts=false;
var popupWinDocking, popupWinColor,  popupWinAutoShow,popupWinStartTime;

popupWinhasFilters = navigator.appName.charAt(0)=="M" ? true : false;

popupWinAutoShow = true;        // true or false
popupWinStartTime = 1000;       // start time

popupWinhideAfter = 5000;       // 5000(Hide after 5sec), -1(NoHide)

popupWinDocking = "topRight"    // topLeft, topRight, bottomRight, bottomLeft
popupWinColor = "Orange "       // Violet, Red, Blue, Green, Orange

popupWinbChangeTexts = true;    // true or false
popupWinNewTitle = "オレンジのウィンドウ...";
popupWinNewAnchorMsg = "ASP.NET 2.0 + AJAX!";
popupWinNewContent = "このウィンドウは右上に表示されます・・・<br>5秒後に消えます..."

window.onload = popupWinLoad;

var popupWinoldonscrollHndr = window.onscroll;
window.onscroll = popupWinScroll;

popupWinnText="<head><title>Title here</title>" +
  "<style type=\"text/css\">" +
  "body {background:#D2C8DC; padding:5px; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFD2C8DC', EndColorStr='#FFFFFFFF');}"+
  "h1 {font:bold 16px arial,sans-serif; color:#200040; text-align:center; margin:0px;}"+
  "p {font:14px arial,sans-serif; color:#200040;}"+
  "</style></head>"+
  "<body><h1>ここにタイトルが表示されます...</h1>"+
  "<p>このテキストはポップアップウィンドウに表示されます。</p>"+
  "</body>";

function popupWinScroll() {
  if (popupWinoldonscrollHndr != null) { 
    popupWinoldonscrollHndr(); 
  }

var elWin = document.getElementById('popupWin');  
  
  if (popupWintmrHide != -1) {
    elWin.style.display = 'none'; 
    elWin.style.display = 'block';
  }
}

function popupWinShowPopup(show) {
  var elWin = document.getElementById('popupWin');
  var elHdr = document.getElementById('popupWinHeader');
  var elCnt = document.getElementById('popupWinContent')
    
  if (popupWindxTimer != -1) { 
    elWin.filters.blendTrans.stop(); 
  }

if ((popupWintmrHide != -1) && ((show != null) && (show == popupWinshowBy))) {
    clearInterval(popupWintmrHide);
    popupWintmrHide = setInterval(popupWinHideTimer, popupWinhideAfter);
    return;
  }
  if (popupWintmrId != -1) 
    return;
  
  popupWinshowBy = show;

elWin.style.left = popupWinoldLeft;
  elWin.style.top = '';
  elWin.style.filter = '';
    
  elWin.className = "popupWin" +  popupWinColor + popupWinDocking;  // by ak
  
  document.getElementById("popupWinHeader").className = "popupWinHeader" + popupWinColor; // by ak
  document.getElementById("popupWinContent").className = "popupWinContent" + popupWinColor; // by ak
  document.getElementById("popupWinClose").className = "popupWinClose" + popupWinColor; // by ak
  document.getElementById("popupWinAnchor").className = "popupWinAnchor" + popupWinColor; // by ak
  document.getElementById("popupWinParagraph").className = "popupWinParagraph" + popupWinColor;  // by ak

if (popupWintmrHide != -1) { 
    clearInterval(popupWintmrHide); 
  }
  
  popupWintmrHide = -1;

elHdr.style.display = 'none';
  elCnt.style.display = 'none';
  
//  if (navigator.userAgent.indexOf('Opera') != -1)
//    elWin.style.bottom=(document.body.scrollHeight*1-document.body.scrollTop*1
//                    -document.body.offsetHeight*1+1*popupWinpopupBottom)+'px';
  
  if (popupWinbChangeTexts) {
    popupWinbChangeTexts = false;
    document.getElementById('popupWinTitle').innerHTML = popupWinNewTitle;    
    document.getElementById('popupWinAnchor').innerHTML = popupWinNewAnchorMsg;
    document.getElementById('popupWinParagraph').innerHTML = popupWinNewContent;
  }

popupWinactualHgt = 0; 
  elWin.style.height = popupWinactualHgt + 'px';
  elWin.style.visibility = '';
  if (!popupWinresetTimer) { 
    elWin.style.display=''; 
  }
  popupWintmrId = setInterval(popupWinTimer,(popupWinresetTimer ? popupWinStartTime:20));
}

function popupWinLoad() {
  if (popupWinoldonloadHndlr != null) {
    popupWinoldonloadHndlr();
  }

var elWin = document.getElementById('popupWin');
  var elHdr = document.getElementById('popupWinHeader');  
  var elCnt = document.getElementById('popupWinContent');

popupWinoldLeft = elWin.style.left;
  popupWinpopupBottom = elWin.style.bottom.substr(0, elWin.style.bottom.length - 2);
  
  popupWintitHgt = elHdr.style.height.substr(0, elHdr.style.height.length - 2);
  popupWinpopupHgt = elWin.style.height;
  popupWinpopupHgt = popupWinpopupHgt.substr(0, popupWinpopupHgt.length - 2); 
  popupWinactualHgt = 0;
  popupWincntDelta = popupWinpopupHgt - (elCnt.style.height.substr(0, elCnt.style.height.length - 2));

if (popupWinAutoShow) {
    popupWinresetTimer = true;
    popupWinShowPopup(null);
  }
}

function popupWinHideTimer() {
  var elWin = document.getElementById('popupWin');
  var elHdr = document.getElementById('popupWinHeader');  
  var elCnt = document.getElementById('popupWinContent');
  
  clearInterval(popupWintmrHide); 
  popupWintmrHide = -1;
  el = document.getElementById('popupWin');
  if (popupWinhasFilters) {
    backTit = elHdr.innerHTML;  
    backCnt = elCnt.innerHTML;

elHdr.innerHTML = '';
    elCnt.innerHTML = '';
 
    elWin.style.filter = 'blendTrans(duration=1)';
    elWin.filters.blendTrans.apply();
    elWin.style.visibility = 'hidden';
    elWin.filters.blendTrans.play();
    
    elHdr.innerHTML = backTit;    
    elCnt.innerHTML = backCnt;
    
    popupWindxTimer = setInterval(popupWinClearTimer,1000);
  }
  else {
    elWin.style.visibility = 'hidden';
  }    
}

function popupWinClearTimer() {
  clearInterval(popupWindxTimer); 
  popupWindxTimer = -1;
}

function popupWinShowWindow() {  
  if (popupWinnWin != null) {
    popupWinnWin.close();
  }  
  popupWinnWin = window.open('','popupWinnWin','width=300,height=200,scrollbars=no, ' +
    'menubar=no, resizable=no, status=no, toolbar=no, location=no');
  popupWinnWin.document.write(popupWinnText);
}

var popupWinmousemoveBack,popupWinmouseupBack;
var popupWinofsX,popupWinofsY;

function popupWinDragDrop(e) {
  popupWinmousemoveBack = document.body.onmousemove;
  popupWinmouseupBack = document.body.onmouseup;
  ox = (e.offsetX == null) ? e.layerX:e.offsetX;
  oy = (e.offsetY == null) ? e.layerY:e.offsetY;
  popupWinofsX = ox; 
  popupWinofsY = oy;

document.body.onmousemove = popupWinDragDropMove;
  document.body.onmouseup = popupWinDragDropStop;
  if (popupWintmrHide != -1) {
    clearInterval(popupWintmrHide);
  }    
}

function popupWinDragDropStop() {
  document.body.onmousemove = popupWinmousemoveBack;
  document.body.onmouseup = popupWinmouseupBack;
}

//]]>
</script>    
</head>
<body>

<div id="popupWin" class="popupWinViolet bottomRight" 
  style="display:none; position:absolute; z-index:9999; width:230px; height:100px;" 
  onselectstart="return false;"  
  onmousedown="return popupWinDragDrop(event);" >
  <div id="popupWinHeader" class="popupWinHeaderViolet"
    style="cursor:default; display:none; position:absolute; padding:2px; left:2px; width:220px; top:2px; height:14px; font:12px arial,sans-serif; text-decoration:none;">
    <span id="popupWinTitle">ウィンドウのタイトル...</span>
    <span id="popupWinClose" class="popupWinCloseViolet"
      style="position:absolute; right:0px; top:0px; cursor:pointer; font:bold 12px arial,sans-serif; position:absolute; right:3px;"
      onclick="popupWinClose()"
      onmousedown="event.cancelBubble=true;"
      onmouseover="style.color='#400080';"
      onmouseout="style.color='#7D5AA0';">X</span>
  </div>                
  <div id="popupWinContent" class="popupWinContentViolet" 
    style="display:none; overflow:hidden; text-align:center; position:absolute; padding:2px; left:2px; width:220px; top:20px; height:72px;"
    onmousedown="event.cancelBubble=true;">    
    <a id="popupWinAnchor" class="popupWinAnchorViolet"
      style="font:12px arial,sans-serif; text-decoration:none;" 
      onmouseover="style.textDecoration='underline';"
      onmouseout="style.textDecoration='none';"
      target="_blank"
      href="http://www.friendlysw.com/aspnet/aspnet.asp">ここをクリックく!</a>
 
    <p id="popupWinParagraph" class="popupWinParagraphViolet"
      style="font:12px arial,sans-serif; text-decoration:none;" >
      このウィンドウは右下に表示されます・・・<br>5秒後に消えます...
    </p>  
  </div>
</div>

</body>
</html>

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
//<![CDATA[

var popupWinoldonloadHndlr = window.onload
var popupWinpopupHgt, popupWinactualHgt, popupWintmrId=-1, popupWinresetTimer;
var popupWintitHgt, popupWincntDelta, popupWintmrHide=-1, popupWinhideAfter, popupWinhideAlpha, popupWinhasFilters;
var popupWinnWin, popupWinshowBy=null, popupWindxTimer=-1, popupWinpopupBottom, popupWinoldLeft;
var popupWinnText
var popupWinNewContent,popupWinNewAnchorMsg,popupWinNewTitle,popupWinbChangeTexts=false;
var popupWinDocking, popupWinColor,  popupWinAutoShow,popupWinStartTime;

popupWinhasFilters = navigator.appName.charAt(0)=="M" ? true : false;

popupWinAutoShow = true;        // true or false
popupWinStartTime = 1000;       // start time

popupWinhideAfter = 5000;       // 5000(Hide after 5sec), -1(NoHide)

popupWinDocking = "topRight"    // topLeft, topRight, bottomRight, bottomLeft
popupWinColor = "Orange "       // Violet, Red, Blue, Green, Orange

popupWinbChangeTexts = true;    // true or false
popupWinNewTitle = "オレンジのウィンドウ...";
popupWinNewAnchorMsg = "ASP.NET 2.0 + AJAX!";
popupWinNewContent = "このウィンドウは右上に表示されます・・・<br>5秒後に消えます..."

window.onload = popupWinLoad;

var popupWinoldonscrollHndr = window.onscroll;
window.onscroll = popupWinScroll;

popupWinnText="<head><title>Title here</title>" +
  "<style type=\"text/css\">" +
  "body {background:#D2C8DC; padding:5px; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFD2C8DC', EndColorStr='#FFFFFFFF');}"+
  "h1 {font:bold 16px arial,sans-serif; color:#200040; text-align:center; margin:0px;}"+
  "p {font:14px arial,sans-serif; color:#200040;}"+
  "</style></head>"+
  "<body><h1>ここにタイトルが表示されます...</h1>"+
  "<p>このテキストはポップアップウィンドウに表示されます。</p>"+
  "</body>";

function popupWinScroll() {
  if (popupWinoldonscrollHndr != null) { 
    popupWinoldonscrollHndr(); 
  }

  var elWin = document.getElementById('popupWin');  
  
  if (popupWintmrHide != -1) {
    elWin.style.display = 'none'; 
    elWin.style.display = 'block';
  }
}

function popupWinShowPopup(show) {
  var elWin = document.getElementById('popupWin');
  var elHdr = document.getElementById('popupWinHeader');
  var elCnt = document.getElementById('popupWinContent')
    
  if (popupWindxTimer != -1) { 
    elWin.filters.blendTrans.stop(); 
  }

  if ((popupWintmrHide != -1) && ((show != null) && (show == popupWinshowBy))) {
    clearInterval(popupWintmrHide);
    popupWintmrHide = setInterval(popupWinHideTimer, popupWinhideAfter);
    return;
  }
  if (popupWintmrId != -1) 
    return;
  
  popupWinshowBy = show;

  elWin.style.left = popupWinoldLeft;
  elWin.style.top = '';
  elWin.style.filter = '';
    
  elWin.className = "popupWin" +  popupWinColor + popupWinDocking;  // by ak
  
  document.getElementById("popupWinHeader").className = "popupWinHeader" + popupWinColor; // by ak
  document.getElementById("popupWinContent").className = "popupWinContent" + popupWinColor; // by ak
  document.getElementById("popupWinClose").className = "popupWinClose" + popupWinColor; // by ak
  document.getElementById("popupWinAnchor").className = "popupWinAnchor" + popupWinColor; // by ak
  document.getElementById("popupWinParagraph").className = "popupWinParagraph" + popupWinColor;  // by ak

  if (popupWintmrHide != -1) { 
    clearInterval(popupWintmrHide); 
  }
  
  popupWintmrHide = -1;

  elHdr.style.display = 'none';
  elCnt.style.display = 'none';
  
//  if (navigator.userAgent.indexOf('Opera') != -1)
//    elWin.style.bottom=(document.body.scrollHeight*1-document.body.scrollTop*1
//                    -document.body.offsetHeight*1+1*popupWinpopupBottom)+'px';
  
  if (popupWinbChangeTexts) {
    popupWinbChangeTexts = false;
    document.getElementById('popupWinTitle').innerHTML = popupWinNewTitle;    
    document.getElementById('popupWinAnchor').innerHTML = popupWinNewAnchorMsg;
    document.getElementById('popupWinParagraph').innerHTML = popupWinNewContent;
  }

  popupWinactualHgt = 0; 
  elWin.style.height = popupWinactualHgt + 'px';
  elWin.style.visibility = '';
  if (!popupWinresetTimer) { 
    elWin.style.display=''; 
  }
  popupWintmrId = setInterval(popupWinTimer,(popupWinresetTimer ? popupWinStartTime:20));
}

function popupWinLoad() {
  if (popupWinoldonloadHndlr != null) {
    popupWinoldonloadHndlr();
  }    

  var elWin = document.getElementById('popupWin');
  var elHdr = document.getElementById('popupWinHeader');  
  var elCnt = document.getElementById('popupWinContent');

	popupWinoldLeft = elWin.style.left;
  popupWinpopupBottom = elWin.style.bottom.substr(0, elWin.style.bottom.length - 2);
  
  popupWintitHgt = elHdr.style.height.substr(0, elHdr.style.height.length - 2);
  popupWinpopupHgt = elWin.style.height;
  popupWinpopupHgt = popupWinpopupHgt.substr(0, popupWinpopupHgt.length - 2); 
  popupWinactualHgt = 0;
  popupWincntDelta = popupWinpopupHgt - (elCnt.style.height.substr(0, elCnt.style.height.length - 2));

  if (popupWinAutoShow) {
    popupWinresetTimer = true;
    popupWinShowPopup(null);
  }
}

function popupWinTimer() {  
  var elWin = document.getElementById('popupWin');
  var elHdr = document.getElementById('popupWinHeader');  
  var elCnt = document.getElementById('popupWinContent');
    
  if (popupWinresetTimer) {
    elWin.style.display = '';
    clearInterval(popupWintmrId); 
    popupWinresetTimer = false;
    popupWintmrId = setInterval(popupWinTimer,20);
  }
  popupWinactualHgt += 5;
  if (popupWinactualHgt >= popupWinpopupHgt) {
    popupWinactualHgt = popupWinpopupHgt; 
    clearInterval(popupWintmrId); 
    popupWintmrId = -1;
    elCnt.style.display='';
    if (popupWinhideAfter != -1) { 
      popupWintmrHide = setInterval(popupWinHideTimer,popupWinhideAfter); 
    }
  }
  if (popupWintitHgt < popupWinactualHgt-6) {
    elHdr.style.display = '';
  }    
  if ((popupWinactualHgt - popupWincntDelta) > 0) {    
    elCnt.style.display = '';
    elCnt.style.height = (popupWinactualHgt - popupWincntDelta) + 'px';
  }
  elWin.style.height = popupWinactualHgt + 'px';
}

function popupWinHideTimer() {
  var elWin = document.getElementById('popupWin');
  var elHdr = document.getElementById('popupWinHeader');  
  var elCnt = document.getElementById('popupWinContent');
  
  clearInterval(popupWintmrHide); 
  popupWintmrHide = -1;
  el = document.getElementById('popupWin');
  if (popupWinhasFilters) {
    backTit = elHdr.innerHTML;  
    backCnt = elCnt.innerHTML;

    elHdr.innerHTML = '';
    elCnt.innerHTML = '';
 
    elWin.style.filter = 'blendTrans(duration=1)';
    elWin.filters.blendTrans.apply();
    elWin.style.visibility = 'hidden';
    elWin.filters.blendTrans.play();
    
    elHdr.innerHTML = backTit;    
    elCnt.innerHTML = backCnt;
    
    popupWindxTimer = setInterval(popupWinClearTimer,1000);
  }
  else {
    elWin.style.visibility = 'hidden';
  }    
}

function popupWinClearTimer() {
  clearInterval(popupWindxTimer); 
  popupWindxTimer = -1;
}

function popupWinClose() {
  var elWin = document.getElementById('popupWin');
  if (popupWintmrId == -1) {    
    elWin.style.filter = '';
    elWin.style.display = 'none';
    elWin.style.visibility = 'hidden';  // added by ak    
    if (popupWintmrHide!=-1) {
      clearInterval(popupWintmrHide); 
    }      
    popupWintmrHide = -1;    
  }
}

function popupWinShowWindow() {  
  if (popupWinnWin != null) {
    popupWinnWin.close();
  }  
  popupWinnWin = window.open('','popupWinnWin','width=300,height=200,scrollbars=no, ' +
    'menubar=no, resizable=no, status=no, toolbar=no, location=no');
  popupWinnWin.document.write(popupWinnText);
}

var popupWinmousemoveBack,popupWinmouseupBack;
var popupWinofsX,popupWinofsY;

function popupWinDragDrop(e) {
  popupWinmousemoveBack = document.body.onmousemove;
  popupWinmouseupBack = document.body.onmouseup;
  ox = (e.offsetX == null) ? e.layerX:e.offsetX;
  oy = (e.offsetY == null) ? e.layerY:e.offsetY;
  popupWinofsX = ox; 
  popupWinofsY = oy;

  document.body.onmousemove = popupWinDragDropMove;
  document.body.onmouseup = popupWinDragDropStop;
  if (popupWintmrHide != -1) {
    clearInterval(popupWintmrHide);
  }    
}

function popupWinDragDropMove(e) {
  var elWin = document.getElementById('popupWin');          
  if (e == null && event != null) {
    elWin.style.left = (event.clientX * 1 + document.body.scrollLeft - popupWinofsX) + 'px';
    elWin.style.top = (event.clientY * 1 + document.body.scrollTop - popupWinofsY) + 'px';
    event.cancelBubble = true;
  }
  else {
    elWin.style.left = (e.pageX * 1 - popupWinofsX) + 'px';
    elWin.style.top = (e.pageY * 1 - popupWinofsY) + 'px';
    e.cancelBubble = true;
  }
  if ((event.button & 1) == 0) {
    popupWinDragDropStop();
  }    
}

function popupWinDragDropStop() {
  document.body.onmousemove = popupWinmousemoveBack;
  document.body.onmouseup = popupWinmouseupBack;
}

//]]>

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
.topLeft {
  top:15px;     /* 0px */
  left:15px;    /* 0px */    
}
.topRight {
  top:15px;     /* 0px */ 
  right:15px;   /* 0px */
}

.bottomLeft {
  bottom:15px;  /* 0px */
  left:15px;    /* 0px */
}
.bottomRight {
  bottom:15px;  /* 0px */
  right:15px;   /* 0px */
}

.popupWinViolet {
  background:#D2C8DC; 
  border-right:1px solid #400080; 
  border-bottom:1px solid #400080;
  border-left:1px solid #B9AAC8; 
  border-top:1px solid #B9AAC8;  
}

.popupWinHeaderViolet { 
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFD2C8DC', EndColorStr='#FFFFFFFF');
  color:#200040;   
}

.popupWinCloseViolet { 
  color:#7D5AA0;
}

.popupWinContentViolet { 
  border-left:1px solid #7D5AA0; 
  border-top:1px solid #7D5AA0;
  border-bottom:1px solid #B9AAC8; 
  border-right:1px solid #B9AAC8;
  background:#D2C8DC; 
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFD2C8DC', EndColorStr='#FFFFFFFF'); 
}  

.popupWinAnchorViolet {
  color:#200040; 
}

.popupWinParagraphViolet {
  color:#200040;
}

.popupWinGreen {
  background:#C8DCC8; 
  border-right:1px solid #008000; 
  border-bottom:1px solid #008000;
  border-left:1px solid #AAC8AA; 
  border-top:1px solid #AAC8AA; 
}

.popupWinHeaderGreen { 
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFC8DCC8', EndColorStr='#FFFFFFFF');
  color:#004000;  
}

.popupWinCloseGreen { 
  color:#5AA05A;  
}

.popupWinContentGreen { 
  border-left:1px solid #5AA05A; 
  border-top:1px solid #5AA05A;
  border-bottom:1px solid #AAC8AA; 
  border-right:1px solid #AAC8AA;
  background:#C8DCC8; 
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFC8DCC8', EndColorStr='#FFFFFFFF');
}  

.popupWinAnchorGreen {
  color:#004000;  
}

.popupWinParagraphGreen {
  color:#004000;
}

.popupWinRed {
  background:#DCC8C8; 
  border-right:1px solid #800000; 
  border-bottom:1px solid #800000;
  border-left:1px solid #C8AAAA; 
  border-top:1px solid #C8AAAA; 
}

.popupWinHeaderRed { 
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFDCC8C8', EndColorStr='#FFFFFFFF');
  color:#400000;  
}

.popupWinCloseRed { 
  color:#A05A5A;  
}

.popupWinContentRed { 
  border-left:1px solid #A05A5A; 
  border-top:1px solid #A05A5A;
  border-bottom:1px solid #C8AAAA; 
  border-right:1px solid #C8AAAA;
  background:#DCC8C8; 
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFDCC8C8', EndColorStr='#FFFFFFFF');
}  

.popupWinAnchorRed {
  color:#400000;  
}

.popupWinParagraphRed {
  color:#400000;  
}

.popupWinBlue {
  background:#E0E9F8; 
  border-right:1px solid #455690; 
  border-bottom:1px solid #455690; 
  border-left:1px solid #B9C9EF; 
  border-top:1px solid #B9C9EF; 
}

.popupWinHeaderBlue { 
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FFE0E9F8', EndColorStr='#FFFFFFFF');
  color:#1F336B;    
}

.popupWinCloseBlue { 
  color:#728EB8;   
}

.popupWinContentBlue { 
  border-left:1px solid #728EB8; 
  border-top:1px solid #728EB8; 
  border-bottom:1px solid #B9C9EF; 
  border-right:1px solid #B9C9EF; 
  background:#E0E9F8; 
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFE0E9F8', EndColorStr='#FFFFFFFF');
}  

.popupWinAnchorBlue {
  color:#1F336B;  
}

.popupWinParagraphBlue {
 color:#1F336B;    
}

.popupWinOrange {
	background:#ff9900; 
	border-right:1px solid #000000; 
	border-bottom:1px solid #000000;
	border-left:1px solid #ffc080; 
	border-top:1px solid #ffc080;  
}

.popupWinHeaderOrange { 
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFff9900', EndColorStr='#FFfbeebb');
  color:#000000; 
}

.popupWinCloseOrange { 
  color:#804000;   
}

.popupWinContentOrange { 
  border-left:1px solid #804000; 
  border-top:1px solid #804000;
  border-bottom:1px solid #ffc080; 
  border-right:1px solid #ffc080;
  background:#ff9900; 
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFff9900', EndColorStr='#FFfbeebb');
}  

.popupWinAnchorOrange {
  color:#000000; 
}

.popupWinParagraphOrange {
  color:#000000;  
}

このサンプルを編集して試してみる!

標準DOMスクリプティング JavaScript＋DOMによるWebアプリデザインの基礎

JavaScript + Ajax 実践サンプル集 (907本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

ポップアップウィンドウ（オレンジ）

JavaScript + Ajax 実践サンプル集 (907本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

ポップアップウィンドウ（オレンジ）

JavaScript + Ajax 実践サンプル集 (907本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...