原生html页面弹窗_html+javascript可拖动弹窗

最近在慕课网上学习了一个网页可拖动对话框js实现的演示视频，这个demo中的例子是百度首页登录按钮的弹窗，如下图：

​当点击左上角的登录按钮时，弹窗出现并自动居中，同时窗口可拖动的范围被限制在了可视区域内，即浏览器视窗的上下左右边界，弹窗无法移出移动出四个边界，也不会出现滚动条。

​另一个效果就是，当改变窗口大小时，对话框自动居中。

这个视频中用了原生js，jQuery两种写法实现案例，但本质上，对话框居中，限制拖动范围的的计算思路是一致的。

为了简化页面，总结核心思路，我重新写了一个小demo，界面如下：

​依旧保持着点击弹出按钮，对话框自动居中，拖动范围限制，改变窗口大小弹窗居中等效果，下面是本demo的HTMl结构和CSS布局代码：

HTML结构代码

CSS样式代码

​下面是重点的JS部分，先介绍

一、原生JS的写法：

这里有一个比较实用的技巧，首先定义一个g()函数用于获取对象

function g(id){return document.getElementByIdx_x(id)};<