模态框拖拽

1、点击弹出层，回弹出模态框，并且显示半透明的遮挡层

2、点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层

3、鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动

4、鼠标松开，可以停止拖动模态框移动

鼠标放到最上面一行的时候，变成十字形状 load.style.cursor = 'move';

主要是拖动效果的实现

在页面中拖拽的过程：鼠标按下（mousedown）并且移动（mosemove）（怎么实现两个事件必须同时发生--鼠标移动事件写在鼠标按下事件的里面），之后松开鼠标（moseup）      ？？？？？

拖拽过程：鼠标在移动过程中，获得最新的值赋值给模态框的left和top值（自己未用到），这样模态就可以跟着鼠标走了

    
    
    
    
    



    
点击，弹出登录框
    

        
登录会员
        

            

                

                    

                        用户名：
                    
                    

                        
                    
                
                

                    
登录密码：
                    
 
                

            





        
        登录会员
        
        
关闭
    
    

拖拽那边自己无法实现：主要是box盒子的css设置就出了问题；明天再试试

margin：改变的是盒子与盒子之间的距离

鼠标按下：首先获得其相对于盒子的坐标

然后鼠标移动：由于要保持鼠标相对于盒子的坐标不变（可以根据这个原理，列写等式，然后把关系弄清楚），那么盒子就需要移动

    

        

            登录会员
        
    
    

    

根据原理，对最开始的程序做出修改：

 

    
    
    
    
    



    

        
点击，弹出登录框

        

            

                
 登录会员
                关闭 
            
            

                

                    
                    用户名：
                    
                
                

                        登录密码：
                     

                
                
            
        
    
    

终于完成，在CSS样式哪里还要多练习