JavaScript 实现模态可拖动窗口

最新推荐文章于 2022-02-08 11:12:18 发布

iteye_7488

最新推荐文章于 2022-02-08 11:12:18 发布

阅读量119

点赞数

分类专栏： Web前端文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/iteye_7488/article/details/81996706

版权

Web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<html>
<head>
<style>
div.titleBar{background: #2279F3;margin: 0px auto;width: 100%;height: 21px;border: #0000FF solid 1px;}
div.closeButton{float: right;}
div.mainBody{margin: auto;}
#divModalDialog{border:solid 1px;background:white;POSITION: absolute;left:0px;top:0px;DISPLAY: none;z-index:2;height:200px;WIDTH: 350px;}
#divModal{BACKGROUND-COLOR:#ECE9D8; FILTER: alpha(opacity=50);opacity: 0.5; LEFT: 0px; POSITION:absolute; TOP: 0px}
</style>
<script>
function showModel()
{
     divModalDialog.style.display = "block";
     resizeModal();
     window.onresize = resizeModal;
doSelect("hidden");
}
function closeModel()
{
     divModal.style.width = "0px";
     divModal.style.height = "0px";
     divModalDialog.style.display = "none";
     window.onresize = null;
doSelect("visible");
}
function doSelect(status)
{
var allObj=document.getElementsByTagName( "select"); 
for(i=0;i<allObj.length;i++){   
   if(allObj.getAttribute("hide")!="true"){   
    allObj.style.visibility=status;
   }
}
}
function resizeModal()
{
     divModal.style.width = document.body.scrollWidth;
     divModal.style.height = document.body.scrollHeight;
     divModalDialog.style.left = ((document.body.offsetWidth - divModalDialog.offsetWidth) / 2);
     divModalDialog.style.top = ((document.body.offsetHeight - divModalDialog.offsetHeight) / 2);
}
var mouseOffset = null;   
var iMouseDown = false; 
function mouseMove(ev){   
    ev = ev || window.event;   
    var mousePos = mouseCoords(ev);
    if(iMouseDown){
        divModalDialog.style.left = mousePos.x-mouseOffset.x;
        divModalDialog.style.top = mousePos.y-mouseOffset.y;
    }
}
function mouseUp(ev){     
iMouseDown = false;   
}   

function mouseDown(ev){ 
    ev = ev || window.event; 
    var target = ev.target || ev.srcElement;   
if(target.getAttribute("id") == "title"){   
    iMouseDown = true; 
    mouseOffset = getMouseOffset(target,ev);
}   
} 

function mouseCoords(ev) {   
if(ev.pageX || ev.pageY) {   
    return {x:ev.pageX, y:ev.pageY};   
}   
return {   
    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,   
    y:ev.clientY + document.body.scrollTop - document.body.clientTop   
};   
}
function getMouseOffset(target, ev) {   
ev = ev || window.event;   
var docPos = getPosition(target);   
var mousePos = mouseCoords(ev);   
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y} ;   
} 

function getPosition(e) {   
   var left = 0;   
   var top = 0;   
   while (e.offsetParent) {   
     left += e.offsetLeft;   
     top += e.offsetTop;   
     e = e.offsetParent;   
}   
left += e.offsetLeft;   
top += e.offsetTop;   
return {x:left, y:top} ;   
} 

document.onmousemove = mouseMove;   
document.onmousedown = mouseDown;   
document.onmouseup = mouseUp; 
</script>
</head>
<body>
<input type="button" value="点击这里" οnclick="showModel()" />
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<select><option>a</option><option>b</option></select>
<!-- 由于div遮不住select，所以我在现实对话框的时候，吧所有的select都隐藏了，关闭的时候在显示出来 -->
<!-- 如果你有本就要一直隐藏的select，这时也会在关闭对话框时显示出来。-->
<!-- 你可给他加hide="true"属性来使他一直保持隐藏状态 就像下面这个一样-->
<select hide="true" style="visibility:hidden"><option>a</option><option>b</option></select>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input >
<!-- 透明遮罩 -->
<DIV id="divModal"></div>
<!-- 透明遮罩 end -->
<!-- 模态窗口 -->
<DIV id="divModalDialog" >
<div class="titleBar" id="title">
    <div class="closeButton"><a href="javascript:closeModel();">[X]</a></div> 
</div>
<div class="mainBody">
        在这里添加内容
</div>
</DIV><!-- 模态窗口 end -->
</body>
</html>