拖拽的对话框


 //获取超链接,注册点击事件,显示登录框和遮挡层
  my$("link").onclick = function () {
    my$("login").style.display = "block";
    my$("bg").style.display = "block";
  };

  //获取关闭,注册点击事件,隐藏登录框和遮挡层
  my$("closeBtn").onclick = function () {
    my$("login").style.display = "none";
    my$("bg").style.display = "none";
  };

  //按下鼠标,移动鼠标,移动登录框
  my$("title").onmousedown = function (e) {
    //获取此时的可视区域的横坐标-此时登录框距离左侧页面的横坐标
    var spaceX = e.clientX - my$("login").offsetLeft;
    var spaceY = e.clientY - my$("login").offsetTop;
    //移动的事件
    document.onmousemove = function (e) {
      //新的可视区域的横坐标-spaceX====>新的值--->登录框的left属性
      var x = e.clientX - spaceX+250;
      var y = e.clientY - spaceY-140;
      my$("login").style.left = x + "px";
      my$("login").style.top = y + "px";

    }
  };

  document.onmouseup=function () {
    document.onmousemove=null;//当鼠标抬起的时候,把鼠标移动事件干掉
  };

</script>
<script>

  //点击超链接弹出登录框,点击页面的任何位置都可以关闭登录框
  //  my$("link").onclick=function (e) {
  //    my$("login").style.display="block";
  //    //return false;
  //    //e.preventDefault();
  //    //上面的两个是阻止默认事件的
  //    //下面的两个是阻止事件冒泡的
  //    //window.event.cancelBubble=true;
  //    e.stopPropagation();
  //  };
  //  document.onclick=function () {
  //    my$("login").style.display="none";
  //    console.log("隐藏了");
  //  };

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容