DIV模拟弹出窗口(支持拖动)

最新推荐文章于 2023-05-09 15:27:21 发布

vinceding

最新推荐文章于 2023-05-09 15:27:21 发布

阅读量8.1k

点赞数

分类专栏： JavaScript HTML/DHTML 文章标签： div function border javascript 浏览器 table

本文链接：https://blog.csdn.net/vince6799/article/details/1799685

版权

JavaScript 同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

HTML/DHTML

17 篇文章 0 订阅

订阅专栏

现在高版本浏览器都可以设置对弹出窗口进行拦截，所有的浏览器工具条等都对弹出窗口进行拦截，但是有时候我们确实需要弹出窗口。针对这些我们做了一个简单的效果，没有做太多的测试，只是示意一下！

<html>
<head>
<title>div弹出窗口</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">

</style>
<script type="text/javascript">
<!--
window.οnlοad=function(){
drag(document.getElementById('drag'),document.getElementById('lstd'));
};
function drag(o,ot){
ot.οnmοusedοwn=function(a){
  var d=document;if(!a)a=window.event;
  var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
  if(ot.setCapture)
   o.setCapture();
  else if(window.captureEvents)
   window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

  d.οnmοusemοve=function(a){
   if(!a)a=window.event;
   if(!a.pageX)a.pageX=a.clientX;
   if(!a.pageY)a.pageY=a.clientY;
   var tx=a.pageX-x,ty=a.pageY-y;
   o.style.left=tx;
   o.style.top=ty;
  };

  d.οnmοuseup=function(){
   if(o.releaseCapture)
    o.releaseCapture();
   else if(window.captureEvents)
    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
   d.οnmοusemοve=null;
   d.οnmοuseup=null;
  };
};
}
//-->

示例文件:下载
由于上传文件的功能出错,所以把文件当作图片上传,下载后只需要把文件名中的".jpg"去掉就可以打开了

vinceding

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
5
评论
DIV模拟弹出窗口(支持拖动)

现在高版本浏览器都可以设置对弹出窗口进行拦截，所有的浏览器工具条等都对弹出窗口进行拦截，但是有时候我们确实需要弹出窗口。针对这些我们做了一个简单的效果，没有做太多的测试，只是示意一下！ div弹出窗口#drag{ width:250px; height:20px; border:1px solid #3
复制链接

扫一扫