可拖动的div弹出层

傷城~ 2022-07-10 07:28 262阅读 0赞

js：

var mainDiv;  
var bgDiv;  
function popD(mainId, titleId, w, h) \{  
    mainDiv = document.getElementById(mainId);  
    var bw = document.body.scrollWidth;  
    var bh = document.body.scrollHeight;  
    var ch = document.body.clientHeight;  
    var top = document.body.scrollTop;  
    bh = bh < ch ? ch : bh;  
    bgDiv = document.createElement("div");  
    document.body.appendChild(bgDiv);  
    bgDiv.style.width = bw + "px";  
    bgDiv.style.height = bh + "px";  
    bgDiv.style.opacity = "0.5";  
    bgDiv.style.backgroundColor = "\#D1EEEE";  
    bgDiv.style.position = "absolute";  
    bgDiv.style.left = "0";  
    bgDiv.style.top = "0";  
    bgDiv.style.zIndex = "98";  
    mainDiv.style.display = "";  
    mainDiv.style.backgroundColor = "green";  
    mainDiv.style.width = w + "px";  
    mainDiv.style.height = h + "px";  
    mainDiv.style.position = "absolute";  
    mainDiv.style.zIndex = "99";  
    mainDiv.style.left = (bw - w) / 2 + "px";  
    mainDiv.style.top = top + (ch - h) / 2 + "px";  
    mainDiv.style.display = "";  
    var x0 = 0, y0 = 0, x1 = 0, y1 = 0;  
    var moveable = false;  
    var tDiv = document.getElementById(titleId);  
    tDiv.onmousedown = function () \{  
        tDiv.style.cursor = "move";  
        if (event.button == 1) \{  
            tDiv.setCapture();  
            x0 = event.clientX;  
            y0 = event.clientY;  
            x1 = parseInt(mainDiv.offsetLeft);  
            y1 = parseInt(mainDiv.offsetTop);  
            moveable = true;  
        \}  
    \};  
    tDiv.onmouseup = function () \{  
        if (moveable) \{  
            tDiv.releaseCapture();  
            moveable = false;  
        \}  
    \};  
    tDiv.onmousemove = function () \{  
        if (moveable) \{  
            var x = x1 + event.clientX - x0;  
            var y = y1 + event.clientY - y0;  
            if (x + w < bw && x > 0) \{  
                mainDiv.style.left = x;  
            \}  
            if (y + h < bh && y > 0) \{  
                mainDiv.style.top = y;  
            \}  
        \}  
    \};  
\}  
function closeD() \{  
    bgDiv.style.display = "none";  
    mainDiv.style.display = "none";  
\}  
  
html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<HTML>  
 <HEAD>  
  <TITLE></TITLE>  
  <script src="popD.js"></script>  
 </HEAD>  
  
 <BODY>  
   
 最底层内容  
  <div id="main" style="display:none;">  
  <div id="title" style="width:100%;background-color:red;">title</div>  
弹出层<input type="button" value="隐藏" id="hid" οnclick="closeD();">  
  </div>  
    最底层内容  
    <input type="button" value="显示" id="show" οnclick="popD('main','title',300,200);">  
  
 </BODY>  
</HTML>