この記事では、JSによるDivポップアップレイヤーを実装する方法について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
ちなみに、さまざまなプラグインがリリースされると、ポップアップレイヤーを実装するのは非常に簡単です。しかし、私は時々、これらのプラグインは実用的ではなく、純粋なJSのオリジナルのものを見つけることが多いと思います。ネイティブJS Divポップアップレイヤーインスタンスを共有させてください。困っている友達は見ることができます。
言うまでもなく、コードを投稿するだけです。コードとコメントがあります：
次のようにコードをコピーします：/*
* Divレイヤーをポップアップします
*/
functionshowdiv（）
{
var idiv = document.getElementById（ "IDIV"）;
var mou_head = document.getElementById（ 'mou_head'）;
idiv.style.display = "block";
//ポップアップレイヤーを表示するために、次の部分を中央に配置する必要があります
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 = "sixt";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zindex = "500";
procbg.style.opacity = "0.6";
procbg.style.filter = "alpha（ofacity = 70）";
//ページに背景レイヤーを追加します
document.body.AppendChild（procbg）;
document.body.style.overflow = "hidden"; // Scrollbarをキャンセルします
//次の部品は、ポップアップ層のドラッグ効果を実現します
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 = mousemove;
}
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）;
}
<！ - ポップレイヤーStarts->
<div id = "idiv" style = "display：none; position：absolute; z-index：1000; background：＃67a3d9;">
<div id = "mou_head" 100px;高さ= 10px; z-index：1001;位置：絶対; ">これは、ドラッグレイヤーを実装するために使用されます</div>
<入力型= "button" value = "close" onclick = "closediv（）;" />
</div>
<！ - end->
いくつかの美化効果については、自分で変更できます。
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。