js_javascriptスキルでdivポップアップレイヤーを実装する方法

この記事の例では、js で div ポップアップ レイヤーを実装する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

今では様々なプラグインが出てきて、ポップアップレイヤーの実装が非常に簡単だと言われていますが、それらのプラグインは実用的ではなく、純粋なJS独自の生態を求めていることが多いと感じることがあります。ネイティブ js div ポップアップ レイヤーの例を紹介します。必要な友達は見てください。

これについては特に説明する必要はありません。コードとコメントを投稿してください:

コードをコピー コードは次のとおりです:

/*
* DIV レイヤーをポップアップします
*/
関数 showDiv()
{
var Idiv = document.getElementById("Idiv");
var mou_head = document.getElementById('mou_head');
Idiv.style.display = "ブロック";
//次の部分はポップアップ レイヤーを中央に配置する必要があります
Idiv.style.left=(document.documentElement.clientWidth-Idiv.clientWidth)/2 document.documentElement.scrollLeft "px";
Idiv.style.top =(document.documentElement.clientHeight-Idiv.clientHeight)/2 document.documentElement.scrollTop-50 "px";

//以下の部分により、ページ全体が灰色になりクリックできなくなります
var procbg = document.createElement("div") //まず div
を作成します。 procbg.setAttribute("id","mybg") //div
の ID を定義します。 procbg.style.background = "#000000";
procbg.style.width = "100%";
procbg.style.height = "100%";
procbg.style.position = "固定";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zIndex = "500";
procbg.style.opacity = "0.6";
procbg.style.filter = "アルファ(不透明度=70)";
//背景レイヤー追加ページ
document.body.appendChild(procbg);
document.body.style.overflow = "hidden" //スクロールバーをキャンセルします
;
//以下の部分はポップアップレイヤーのドラッグ効果を実装します
var posX;
var posY;
mou_head.onmousedown=function(e)
{
if(!e) e = window.event; //IE
posX = e.clientX - parseInt(Idiv.style.left);
posY = e.clientY - parseInt(Idiv.style.top);
document.onmousemove = マウス移動;
}
document.onmouseup = function()
{
document.onmousemove = null;
}
関数mousemove(ev)
{
if(ev==null) ev = window.event;//IE
Idiv.style.left = (ev.clientX - posX) "px";
Idiv.style.top = (ev.clientY - posY) "px";
}
}
function closeDiv() //ポップアップレイヤーを閉じる
{
var Idiv=document.getElementById("Idiv");
Idiv.style.display="none";
document.body.style.overflow = "auto" //ページのスクロールバーを復元します
; var body = document.getElementsByTagName("body");
var mybg = document.getElementById("mybg");
body[0].removeChild(mybg);
}

これはレイヤーのドラッグを実装するために使用されます

一部の美化効果については、自分で変更できます。

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。