ポップアップレイヤーエフェクトをクリックします。

著者：Eve Cole 更新時間：2025-03-01 03:32:01

次のようにコードコードをコピーします。

<html>

<head>

<Title> Web Special Effects-Window Special Effects-ポップアップウィンドウが暗くなった後のWebバックグラウンドの効果</title>

<メタhttp-equiv = "content-type" content = "text/html; charset = gb2312">

<！ - 次のコードを<head>と</head> - >に追加します

.black_overlay：absolute：0％;不透明：.80;

。オーバーフロー：auto;}

</style>

</head>

<body>

<！ - 次のコードを<body>と</body> - >に追加します

ここをクリックしてウィンドウを開きます</a>

閉じる</a>

<br>ウィンドウコンテンツ

</div>

</body>

</html>

例2：

次のようにコードコードをコピーします。

<Title>非タイトルページ</title>

<スクリプト言語= "javascript" type = "text/javascript">

function hid（）

{{

var div4 = document.getElementById（ "div1"）;

div4.style.display = "block";

div4.style.width = "200px";

div4.style.head = "150px";

div4.style.zindex = "9999";

div4.style.top = "43％";

div4.style.left = "43％";

div4.style.position = "absolute";

var div3 = document.getElementById（ "div2"）;

div3.style.display = "block";

div3.style.width = "1000px";

div3.style.zindex = "9998";

div3.Style.Position = "Absolute";

div3.Style.head = document.body.offseTheight;

div3.style.top = "0px";

div3.style.left = "0px";

}

function vis（）

{{

var div4 = document.getElementById（ "div1"）;

div4.style.display = "none";

var div3 = document.getElementById（ "div2"）;

div3.style.display = "none";

div3.style.width = "0px";

div3.style.head = "0px";

div4.innerhtml = "<a onclick = 'vis（）' style = 'display：block' id = 'text'>クリックして閉じる</a> <br /> <入力name = 'textbox2' type = 'text' ' id = 'textbox2' /> <br /> <input id = 'button3' button = 'button' value = 'button' onclick = 'return button3_onclick（） ";

}

</script>

</head>

<body>

<！ - dwlayouttable->

<tr>

<onclick = "hid（）">クリックして表示</a> <br />

<onclick = "vis（）" style = "display：block" id = "text">クリックして閉じる</a> <br />

<br />

<asp：textbox id = "textbox2" runat = "server"> < /asp：textbox> <br />

<入力ID = "button3" type = "button" value = "button" onclick = "return button3_onclick（）" /> < /div>

</div>

</form> </td>

</tr>

</table>

</div>

</body>

</html>

例3：

次のようにコードコードをコピーします。

<head>

<メタhttp-equiv = "content-type" content = "text /html; charset = gb2312" /> />

<title> [ポップアップレイヤーエフェクト]をクリックします</title>

<style>

* {マージン：0;}

ボディ{font-size：12px;}

#container div {マージントップ：5px;}

#select_city H3 {float：left;}

＃main_city、＃all_province {clear：両方;}

#main_city div、＃all_province div {width：600px;}

#Main_City H4、＃ALL_PROVINCE H4 {left;

#main_city divスパン、＃all_provring div

#float_lay {200px：1px＃d1d1

</style>

//ポップレイヤー

関数openlayer（objid、conid）{

var arraypagesize = getPagesize（）; // getPagesize（）関数を呼び出します

var arraypagescroll = getPagesCroll（）;

if（！document.getElementById（ "popupaddr"）{）{

//ポップアップコンテンツレイヤーを作成します

var pospdiv = document.createelement（ "div"）;

//この要素に属性とスタイルを設定します

popupdiv.setattribute（ "id"、 "popupaddr"）

popupdiv.style.position = "absolute";

popupdiv.style.border = "1px solid #ccc";

popupdiv.style.background = "#fff";

popupdiv.style.zindex = 99;

//ポップアップバックグラウンドレイヤーを作成します

var bodyback = document.createelement（ "div"）;

bodyback.settattribute（ "id"、 "bodybg"）

bodyback.style.position = "absolute";

bodyback.style.width = "100％";

bodyback.style.head =（arraypagesize [1] + 35 + 'px'）;

bodyback.style.zindex = 98;

bodyback.style.top = 0;

bodyback.style.left = 0;

bodyback.style.filter = "alpha（ofacity = 50）";

bodyback.style.opacity = 0.5;

bodyback.style.background = "#ddf";

//ポップアップを実装する（ターゲット要素を挿入した後）

var mybody = document.getElementbyid（objid）;

insertaft（popupdiv、mybody）;

intersuter（bodyback、mybody）;

}

//背景レイヤーを表示します

document.getElementByID（ "BodyBG"）。

//コンテンツレイヤーを表示します

var postobj = document.getElementbyid（ "popupaddr"）

pos.innerhtml = document.getElementById（conf）.innerhtml;

pos.style.display = "";

//ページのポップアップレイヤーを垂直に左右にします（統合）

// popobj.style.width = "600px";

// popobj.height = "400px";

// popobj。

//ページのポップアップレイヤーを垂直に左右にします（性格）

var arrayconsize = getConsize（conf）

pos.style.top = arraypagescroll [1] +（arraypagesize [3] -arrayconsize [1]） / 2-50 + 'px';

pos.style.left =（arraypagesize [0] -ArrayConsize [0]） / 2 -30 + 'px';

}

//コンテンツレイヤーの元のサイズを取得します

関数getConsize（conf）{

var conobj = document.getElementbyid（conf）

conobj.style.position = "absolute";

conobj.style.left = -1000+ "px";

conobj.style.display = "";

var arrayconsize = [conobj.offsetwidth、connable

conobj。

ArrayConsizeを返します。

}

関数Inserter（Newslement、TargetElement）{//挿入

var parent = targetelement.parentnode;

if（parent.lastchild == targetelement）{

Parent.AppendChild（Newslement）;

}

それ以外 {

parent.insertbefore（newslement、targetelement.nextsibling）;

}

//ローリングバーの高さを取得します

function getPagesCroll（）{

var yscroll;

if（self.pageyoffset）{

yscroll = self.pageyoffset;

} else if（document.documentedelement && document.documentment.scroltop）{{{{{{{{{{{{{{{{{{{{{{{

yscroll = document.documentedlement.scrolltop;

} else if（document.body）{{{

yscroll = document.body.scrolltop;

}

arraypagescroll = new Array（ ''、yscroll）

return arraypagescroll;

}

//ページの実際のサイズを取得します

function getPagesize（）{

var xscroll、yscroll;

if（window.innerheight && window.scrollmaxy）{{

xscroll = document.body.scrollwidth;

yscroll = window.innerheight + window.scrollmaxy;

} else if（document.body.scrollheight> document.body.offsetheight）{

sscroll = document.body.scrollwidth;

yscroll = document.body.scrollheight;

} それ以外 {

xscroll = document.body.offsetwidth;

yscroll = document.body.offsetheight;

}

var windowwidth、windowheight;

// var pageheight、pagewidth;

if（self.innerheight）{

windowwidth = self.innerwidth;

windowheight = self.innerheight;

} else if（document.documentedelement && document.documentlement.clientheight）{

windowwidth = document.documentelement.clientWidth;

windowheight = document.documentelement.clitingheight;

} else if（document.body）{{{

windowwidth = document.body.clientWidth;

windowheight = document.body.clitingheight;

}

var pagewidth、pageheight

if（yscroll <windowheight）{

Payheight = WindowHeight;

} それ以外 {

Payheight = yscroll;

}

if（xscroll <windowwidth）{

pagewidth = windowwidth;

} それ以外 {

pageWidth = xscroll;

}

arraypagesize = new Array（pagewidth、pageheight、windowwidth、windowheight）

ArrayPagesizeを返します。

}

//ポップアップレイヤーを閉じます

関数closeLayer（）{

document.getElementById（ "Popupaddr"）。

document.getElementByID（ "BodyBG"）。

falseを返します。

}

</script>

</head>

<body>

<！ - 最初のポップアップレイヤーコンテンツ - >

<div id = "tabtop-l"> <strong>スタイル設定</strong> </div>

<div id = "tabtop-r" onclick = "closelayer（）"> <strong> close </strong> </div>

</div>

<div id = "tabcontent">ここにコンテンツを表示</div>

</div>

<br>

<！ - 2番目のポップアップレイヤーコンテンツ - >

<div id = "tabtop-l2"> <strong style = "color：block">プロンプトの設定</strong> </div>

<div id = "tabtop-r2" onclick = "closelayer（）"> <strong style = "color：red"> close </strong> </div>

</div>

<p>ここにプロンプトコンテンツを表示します」

<p>ヒント1

<p>リマインダー2

</div>

<br>

1 <br>

<br>

<！ - 3番目のポップアップレイヤーコンテンツ - >

<div id = "tabtop-l3"> <strong style = "color：red; font-size：20px">スタイルのデモ</strong> </div>

<div id = "tabtop-r3" onclick = "closelayer（）"> <strong> close </strong> </div>

</div>

<div id = "tabcontent3">こちらのディスプレイのコンテンツ</div>

</div>

</body>

</html>