用jQ实现浮动窗口功能,弹出窗口时背景变暗

html代码

<html>  
    <head>  
      <title>浮动窗口</title>  
        <link type="text/css" rel="stylesheet" href="css/overflow.css" />  
        <script type="text/javascript" src="js/jquery.js"></script>  
        <script type="text/javascript" src="js/overflow.js"></script>  
        <script type="text/javascript">  
                  $(document).ready(function(){   
                        var b = $("#b");   
                        var overFlow = $("#over");   
                        b.click(function(){   
                              overFlow.fadeIn();   
                              $("#mask").css("background","#111");   
                              $("#mask").css("opacity","0.8");   
                        })   
                        $("#close").click(function(){   
                            overFlow.fadeOut();   
                              $("#mask").css("background","#fff");   
                              $("#mask").css("opacity","1");   
                        });   
                        drag($("#over"),$("#title"));   
                  }) ;   
              
              
        </script>  
    </head>  
    <body>  
              
              
            <div id="over">  
                <div id="title"><span id="t">这只是一个演示标题</span><span id="close">[ x ]</span></div>  
              
                <div id="content">  
                    When a container object, such as a div, has mouse capture, events originating on objects within that container are fired by the div, unless the bContainerCapture parameter of the setCapture method is set to false. Passing the value false causes the container to no longer capture all document events. Instead, objects within that container still fire events, and those events also bubble as expected.<br/>  
                            ---This is edited by Alp.   
                </div>  
            </div>  
            <div id="mask"> <a id="b" href="#">click</a></div>  
              
    </body>  
    </html>

JS代码

function drag(overFlow,title){   
        title.onmousedown = function(evt){   
            var doc = document;   
            var evt = evt || window.event;   
            var x = evt.offsetX?evt.offsetX:evt.layerX;   
            var y = evt.offsetY?evt.offsetY:evt.layerY;   
            if(overFlow.setCapture){   
                overFlow.setCapture();   
            }else if(window.captureEvents){   
                window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);   
            }   
         
            doc.onmousemove = function(evt){   
                evt = evt || window.event;   
                var xPosition = evt.pageX || evt.clientX;   
                var yPosition = evt.pageY || evt.clientY;   
                var newX = xPosition - x;   
                var newY = yPosition - y;   
                overFlow.style.left = newX;   
                overFlow.style.top =  newY;   
            };   
         
            doc.onmouseup = function(){   
                if(overFlow.releaseCapture){   
                    overFlow.releaseCapture();   
                }else if(window.captureEvents){   
                    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);   
                }   
                doc.onmousemove=null;   
                doc.onmouseup=null;   
            };   
        };   
  }

css代码

#over{   
        position: absolute;   
        left: 300px;   
        top: 200px;   
        border: 1px solid black;   
        display: none;   
        background: #cccccc;   
        cursor: default;   
        width: 300px;   
        z-index: 10;   
        opacity: 1;   
    }   
           
    #title{   
        border: 1px solid #1840C4;   
        background:  #95B4DC;   
        padding: 2px;   
        font-size:12px;   
        cursor: default;   
    }   
           
    #close{   
        cursor: pointer;   
        margin-right: 1px;   
        overflow: hidden;   
    }   
           
    #content{   
        border: 1px solid #C2D560;   
        background: #EFF4D7;   
    }   
           
    #t{   
        margin-right:145px;   
    }   
           
    #mask{   
        z-index: 1;   
        background: #fff;   
        width: 1024px;   
        height: 800px;   
    }   
           
    #b{   
        position: absolute;   
        left: 200px;   
        top: 100px;   
    }   
           
    body{   
        padding: 0px;   
        margin: 0px;   
    }   
           
    #over{   
        background: transparent;   
    }

原文：http://blog.csdn.net/charonking/article/details/3629323

声明：本文采用 BY-NC-SA 协议进行授权，如无注明均为原创，转载请注明转自你好！刘
本文地址：用jQ实现浮动窗口功能,弹出窗口时背景变暗

发表评论 取消回复

发表评论取消回复