javascript div はドラッグ可能な window_javascript スキルをポップアップします

/*
* ポップアップ div ウィンドウを作成します。
1. インターフェイスの説明: DivWindow(id,title,width,height,content) コンストラクター、ポップアップ ウィンドウ オブジェクトを作成します。
パラメーター: id ポップアップ ウィンドウ ID
title: ポップアップ ウィンドウタイトル名;
width: ポップアップ ウィンドウの幅
height: ポップアップ ウィンドウの高さ
content: ポップアップ ウィンドウの表示内容

2. インターフェイスの説明: closeDivWindow(id) を閉じます。 window
パラメータ: id ポップアップ ウィンドウ ID

3. インターフェイスの説明: setPopupTopTitleFontColor(PopupTopTitleFontColor) ポップアップ ウィンドウのタイトルのフォントの色を設定します
パラメータ:

4.インターフェイスの説明: setPopupTopBgColor(tBgColor) ポップアップ ウィンドウのタイトルの背景色を設定します

5. インターフェイスの説明: setPopupColor(borderColor,bgColor,tFontColor,cBgColor,fColor) は、背景を含むポップアップ ウィンドウのスタイルを設定しますタイトル バー、ポップアップ ウィンドウの境界線の色、コンテンツ フォームの背景色、およびコンテンツ フォームのフォントの色

6. インターフェイスの説明: open()

使用法:
var a = new DivWindow("1","ウィンドウ テスト",580,400,"私の個人 Web サイトへようこそ:
http://www.qqview.com


thx!!!=)... "L);
a.setPopupTopBgColor("black","blue","white") ,"white","black");
a.open();

生成された HTML :

背景を徐々に暗くするための背景 div を制御します。 🎜>

タイトル
maxORmin
閉じる

コンテンツ

@著者 Nieger Dai
@date 2007.11.15
*/

var isIe = (document.all)?true:false;
var moveable=false;
var topDivBorderColor = "#336699";//プロンプト ウィンドウの境界線の色
var topDivBgColor = "#6795B4";//プロンプト ウィンドウのタイトルの背景色
var contentBgColor = " white";//コンテンツ表示ウィンドウの背景色
var contentFontColor = "black";//コンテンツ表示ウィンドウのフォント色
var titleFontColor = "white"; //ポップアップウィンドウのタイトルのフォント色
var index=10000;// z-index;
// ポップアップウィンドウを作成、コンストラクター
function DivWindow(id,title,w,h,content)
{
this.id = id;//ウィンドウID
this.zIndex =index 2;
this.title = title;//ポップアップウィンドウ名
this.message = content;//ポップアップwindow content
this.width = w;//ポップアップ ウィンドウの幅
this.height = h;//ポップアップ ウィンドウの高さ
this.left = (document.body.clientWidth) ? document.body.clientWidth - this.width)/2 : 0;//ポップアップウィンドウの位置、画面の左側からの位置
this.top = (document.body.clientHeight) ? body.clientHeight - this.height)/2 : 0;//ポップアップウィンドウの位置、画面上からの位置
//this.init = init>//this.init; ();
}
//コンストラクタに従って初期値を設定し、ポップアップウィンドウを作成します
DivWindow.prototype = {
//ポップアップウィンドウのタイトルのフォント色を設定します
setPopupTopTitleFontColor:function(tFontColor)
{
titleFontColor = tFontColor;
},
//ポップアップ ウィンドウのタイトルの背景色を設定します
setPopupTopBgColor: function(tBgColor)
{
topDivBgColor = tBgColor;
},
//タイトル バーの背景、ポップアップ ウィンドウの境界線の色、コンテンツ フォームの背景色、コンテンツ フォームのフォントの色を含むポップアップ ウィンドウのスタイルを設定します
setPopupColor:function(borderColor,bgColor,tFontColor,cBgColor,fColor)
{
topDivBorderColor = borderColor;
titleFontColor = tFontColor;
contentBgColor = cBgCol; contentFontColor = fColor;
},
// ポップアップ ウィンドウを開きます
open: function()
{
var sWidth,sHeight
sWidth=document.body .clientWidth; ;
sHeight=document.body.clientHeight;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','window' this.id); styleStr="top:0px;left:0px;position:absolute;background:#245;width:" sWidth "px;height:" sHeight "px;";
styleStr =(isIe)?"filter: alpha( opacity=0);":"opacity:0;";
bgObj.style.cssText=styleStr;
document.body.appendChild(bgObj);
//背景を徐々に暗くします
showBackground(bgObj,25);

// ポップアップ ウィンドウ フレームの背景コンテナ
var windowTopBgDiv = document.createElement("div");
windowTopBgDiv.setAttribute('id',' windowTopBg) ' this.id);
windowTopBgDiv.style.zIndex = this.zIndex;
windowTopBgDiv.style.width = this.width; style.height = this.height;
windowTopBgDiv.style.top = this.top;
windowTopBgDiv.style.background = topDivBgColor; style.fontSize = "9pt";
windowTopBgDiv.style.cursor = "default";
windowTopBgDiv.style.border = "1px ソリッド "
windowTopBgDiv.attachEvent("onmousedown",function( ) {
if(windowTopBgDiv.style.zIndex!=index)
{
index = インデックス 2;
windowTopBgDiv.style.zIndex=idx; }
});
// ポップアップ ウィンドウ ヘッダー フレーム
var windowTopDiv = document.createElement("div");
windowTopDiv.setAttribute('id','windowTop' this.id ) ;
windowTopDiv.style.position = "absolute";
windowTopDiv.style.background = topDivBgColor;//"white";
windowTopDiv.style.color = titleFontColor; = "移動";
windowTopDiv.style.width = this.width-2*2;
windowTopDiv.attachEvent( " ",function(){
if(event.button==1)
{
//タイトルバーをロック;
windowTopDiv.setCapture();
//定義オブジェクト;
var win = windowTopDiv.parentNode;
//マウスとレイヤーの位置を記録します。
y0 = events.clientY; );
y1 = parseInt(win.style.top);
//topDivBgColor = windowTopDiv.style.backgroundColor;
// windowTopDiv.style.backgroundColor = topDivBorderColor;
win.style.borderColor;
}
});
windowTopDiv. "onmouseup",function(){
if(moveable)
{
var win = windowTopDiv.parentNode;
win.style.borderColor = topDivBgColor
windowTopDiv.style.backgroundColor; ;
windowTopDiv.releaseCapture();
moveable = false;
}
});
// ドラッグを開始します
windowTopDiv.attachEvent("onmousemove",function( ){ 🎜>if(moveable)
{
var win = windowTopDiv.parentNode;
win.style.left = x1 イベント.clientX - x0;
win.style.top = y1 イベント .clientY - y0;
}
}; ポップアップ ウィンドウのタイトルの表示
var windowTopTitleSpan = document.createElement("span")
windowTopTitleSpan.setAttribute('id','windowTopTitle' this.id); width = this .width-2*12-4;
windowTopTitleSpan.style.paddingLeft = "3px";
windowTopTitleSpan.innerHTML =

// ポップアップ ウィンドウを追加します操作を最小化および最大化するには
var windowTopOperateSpan = document.createElement("span");
windowTopOperateSpan.setAttribute('id','windowTopOperate' this.id);
windowTopOperateSpan.style.width = 12;
windowTopOperateSpan.style.borderWidth = "0px";
windowTopOperateSpan.style.color = titleFontColor;//"white";
windowTopOperateSpan.style.fontFamily = "webdings";カーソル = " デフォルト";
windowTopOperateSpan.innerHTML = "0";
//ポップアップ ウィンドウ操作を最大化または最小化します
windowTopOperateSpan.attachEvent("onclick",function(){
maxOrMinPopupDiv (windowTopOperateSpan,windowContentDiv );

// ポップアップ ウィンドウを閉じる操作を追加します
var windowTopCloseSpan = document.createElement("span"); 'id',' windowTopClose' this.id);
windowTopCloseSpan.style.width = "0px";
windowTopCloseSpan.style.color = titleFontColor;//" White";
windowTopCloseSpan.style.fontFamily = "webdings";
windowTopCloseSpan.style.cursor = "default";
windowTopCloseSpan.innerHTML = "r";
// ウィンドウを閉じる
windowTopCloseSpan.attachEvent(" onclick",function(){
windowTopDiv.removeChild(windowTopTitleSpan);
windowTopDiv.removeChild(windowTopOperateSpan);
windowTopDiv.removeChild(windowTopCloseSpan);
windowTopBgDiv.removeChild( windowTopDiv );
windowTopBgDiv.removeChild(windowTopBgDiv);

/ / content
var windowContentDiv = document.createElement("div");
windowContentDiv.setAttribute('id','windowContent' this.id);
windowContentDiv.style.background = contentBgColor; windowContentDiv.style.color = contentFontColor;
windowContentDiv.style.cursor = "デフォルト";
windowContentDiv.style.height = (this.height - 20 - 4); 100%";
windowContentDiv.style.position = "relative";
windowContentDiv.style.left = 0;
windowContentDiv.style.top = 24;

windowContentDiv.style.lineHeight = "20px";
windowContentDiv.style.wordBreak = "ブレークオール";
windowContentDiv.style.padding = "3px"; .innerHTML = this.message ;

// コンテンツをファイルに書き込みます
windowTopDiv.appendChild(windowTopOperateSpan); ;
windowTopBgDiv.appendChild(windowContentDiv);
document.body.appendChild(windowTopBgDiv);
var win = windowTopOperateSpan.parentNode.parentNode;
var tit = windowTopOperateSpan.parentNode;
var flg = windowContentDiv.style.display== "none"
{
win.style.height = parseInt(windowContentDiv.style.height) parseInt(tit.style.height) 2*2;
windowContentDiv.style .display = "ブロック"
windowTopOperateSpan.innerHTML = "0"; ;
}
else
{
win.style.height = parseInt(tit.style.height) 2*2 ;
windowTopOperateSpan.innerHTML = "2"; style.display = "none";
}
}
//背景を徐々に暗くします
function showBackground(obj ,endInt)
{
if(isIe)
{
obj.filters.alpha.opacity =1;
if(obj.filters.alpha.opacity{
setTimeout(function(){this.showBackground(obj,endInt) },5);
}
}
else
{
var al=parseFloat(obj.style.opacity);al =0.01; ;
if(al{
setTimeout(function(){this.showBackground(obj, endInt)},5);
}
}
}
//关闭弹出窗口
function closeDivWindow(id)
{
var windowTopTitleSpan = document.getElementById("windowTopTitle" id);
var windowTopOperateSpan = document.getElementById("windowTopOperate" id);
var windowTopCloseSpan = document.getElementById("windowTopClose" id);
var windowTopDiv = document.getElementById("windowTop" id);
var windowTopBgDiv = document.getElementById("windowTopBg" id);
var windowContentDiv = document.getElementById("windowContent" id);
var bgObj = document.getElementById("ウィンドウ" id);

windowTopDiv.removeChild(windowTopTitleSpan);
windowTopDiv.removeChild(windowTopOperateSpan);
windowTopDiv.removeChild(windowTopCloseSpan);
windowTopBgDiv.removeChild(windowTopDiv);
windowTopBgDiv.removeChild(windowContentDiv);
document.body.removeChild(windowTopBgDiv);
document.body.removeChild(bgObj);
}