在工作过程中经常遇到做弹出的层效果，有的需要在元素右下弹出，有的需要弹出在浏览器正中间，有的需要弹出后再拖拽，有的需要背景要变暗，有的需要弹出的层跟随鼠标移动……

网上此类效果其实很多，有javascript原生的，有基于框架写的,但自己好多时候用不到那么高级的效果，所以就把这些功能都分开来一步一步实现。

其实原理很简单.有两种实现途径:一种是通过元素创建和删除，一种是通过显示和隐藏，其余的具体要做成什么样子，就留给CSS来控制了。下面从最简单的开始（不基于框架）

一、最简单的弹出

用到的javascript代码如下：

1  2  3  4 
      5 
      6 
      7  8 17 30 31 32 请猛击我33 
     
      34     
      
弹出层标题栏
35     
      
36         这里是弹出层内容，内容可以是文字、图片等，可以是iframe传进来，也可以用jQuery的load()传进来。如有什么不合理的或可以改进的，大家可以给我留言，共同学习。37     
38 
     
39 40 

二、弹出层—到浏览器中央

用到的javascript代码如下：

1  2  3  4 
      5 
      6 
      7  8 17 34 35 36 请猛击我（我会弹到中间）37 
     
      38     
      
弹出层标题栏
39     
      
40         这里是弹出层内容，内容可以是文字、图片等，可以是iframe传进来，也可以用jQuery的load()传进来。如有什么不合理的或可以改进的，大家可以给我留言，共同学习。41     
42 
     
43 44 

三、弹出层—到浏览器中央—背景变暗

用到的javascript代码如下：

      
      
      请猛击我（我会弹到中间，同时背景变暗）
      
    
       
弹出层标题栏
    
       
        这里是弹出层内容，内容可以是文字、图片等，可以是iframe传进来，也可以用jQuery的load()传进来。如有什么不合理的或可以改进的，大家可以给我留言，共同学习。    
      

四、弹出层—到浏览器中央—背景变暗—支持键盘[Esc]退出

键盘事件的javascript代码如下：

      
      
      请猛击我（弹出层—到浏览器中央—背景变暗—支持键盘[Esc]退出）
      
    
       
弹出层标题栏
    
       
        这里是弹出层内容，内容可以是文字、图片等，可以是iframe传进来，也可以用jQuery的load()传进来。如有什么不合理的或可以改进的，大家可以给我留言，共同学习。    
      

四、弹出层—到浏览器中央—背景变暗—支持键盘[Esc]退出—支持鼠标拖动

鼠标拖动的javascript代码如下：

      
      
      请猛击我（弹出层—到浏览器中央—背景变暗—支持键盘[Esc]退出—支持鼠标拖动）
      
    
       
弹出层标题栏
    
       
        这里是弹出层内容，内容可以是文字、图片等，可以是iframe传进来，也可以用jQuery的load()传进来。如有什么不合理的或可以改进的，大家可以给我留言，共同学习。