JS实现简单可拖动的模态框_javascript技巧_

本文实例为大家分享了JS实现简单可拖动的模态框的具体代码，供大家参考，具体内容如下

这篇博文有 简单实现 和 带样式且稍微复杂一点 的两个版本

简单版本

效果图：

实现思路：

给可拖动部分添加点击事件，触发时计算鼠标在可拖动部分中的坐标（ e.pageX - box.offsetLeft ），得到 x y 。

给 document 添加鼠标移动事件，因为当鼠标拖动模态框的时候，是在整个DOM窗口内移动的。保持鼠标与模态框的相对位置不变，所以需要计算此时的模态框的位置（e.pageX - x ），进而修改模态框位置。此时的 e.pageX 已经发生变化，跟上述的 e.pageX 是不相等的。

当鼠标弹起时，清除移动事件即可。

代码注意点：

1 offsetWidth 这类offset属性是只读属性，不能通过对其进行赋值来修改元素。

2 使用 style.top、style.left 的元素必须有定位，且在给这两个属性赋值的时候必须要在末尾加上单位 'px' 。

3 代码中 mousemove 事件回调函数的参数 e 不能省略，如果省略则会使用外部的 e，即 mousedown 事件回调函数中的 e，因此得到的鼠标坐标是错误的。

代码：

                                   
         
head部分
     
        

复杂版本

效果图：

实现思路：

跟简单版本大体相同

实现代码：

                          
点击，弹出登录框
     
         
登录会员             关闭         
         
             
                 用户名：                              
             
                 登录密码：                              
         
         
登录会员
     
         
        

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！