弹出框（模态框）拖拽

点击弹出层，会弹出模态框，且显示灰色半透明的遮挡层。

点击关闭按钮，可以关闭弹出框，且灰色半透明遮挡层关闭。

按住鼠标拖拽弹出框在页面中移动。

可以停止拖动弹出框移动。

（

① 弹出框和遮挡层就会显示出来 display:block;
② 弹出框和遮挡层就会隐藏起来 display:none;
③ 在页面中拖拽的原理： 鼠标按下并且移动， 之后松开鼠标
④ 触发事件是鼠标按下 mousedown， 鼠标移动mousemove 鼠标松开 mouseup
⑤ 拖拽过程: 鼠标移动过程中，获得最新的值赋值给弹出框的left和top值， 这样弹出框可以跟着鼠标走了
⑥ 鼠标按下触发的事件源是 最上面一行，就是 id 为 title
⑦ 鼠标的坐标 减去 鼠标在盒子内的坐标， 才是弹出框真正的位置。
⑧ 鼠标按下，我们要得到鼠标在盒子的坐标。
⑨ 鼠标移动，就让弹出框的坐标 设置为 ： 鼠标坐标 减去盒子坐标即可，注意移动事件写到按下事件里面。
⑩ 鼠标松开，就停止拖拽，就是可以让鼠标移动事件解除
）

    
    
    



    
点击，弹出登录框
    

        
登录会员
            关闭
        
        

            

                用户名：
                
            
            

                登录密码：
                
            
        
        
登录会员