如何用JavaScript编写一个实现简单拖动效果的模态框示例？

本文共计1140个文字，预计阅读时间需要5分钟。

原文：本文实例为大家分享了JS实现简单拖动模式的整体代码，供大家参考。具体内容如下：+ 需要实现的效果：+ 点击点击，弹出登录框后，模式框和遮拦层就会显示出来+ 点击关闭按钮，模式框“模式就会关闭”

改写后：本文提供JS实现基础拖动模式的完整代码，供参考。主要内容包括：+ 实现目标：+ 点击弹出登录框，模式框与遮拦层同时显现+ 点击关闭按钮，模式框“模式将关闭”

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

需要实现的效果：

①点击“点击，弹出登录框”后模态框和遮挡层就会显示出来

②点击关闭按钮，模态框和遮盖层就会隐藏起来

③页面拖拽

功能分析：

首先给上面的"点击，弹出登录框"设置点击事件，点击之后就显示遮罩层和模态框，然后给模态框上面的关闭按钮设置点击事件，点击之后就隐藏遮罩层和模态框。然后是拖拽过程，这个过程的实现较为复杂，主要分为下面几步：

1.明确模态框的真正位置是鼠标的坐标减去鼠标在模态框内的坐标。

2.鼠标的坐标通过鼠标按下事件获取，通过e.pageY和e.pageX来获取。