`
bluemusic
  • 浏览: 48220 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

浮动窗口 一篇通 jQuery

jQueryCSSJavaScriptUIWindows 
阅读更多

用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;
}

 

  • 大小: 22.3 KB
分享到：
| 验证码 一篇通
评论
4 楼 fuyiping 2008-12-23  
aaaaaa
3 楼 ayeah 2008-08-08  
一个window，应该复杂不到哪里，blockui支持iframe，dom，参数等作为显示内容，还支持自定义按钮。。。

忘记说了，还有ui里面的dialog，还有interface里面的window，竟然可以模仿vista的毛玻璃效果，虽然还差点，不过也很酷了

http://interface.eyecon.ro/demos/windows.html
2 楼 bluemusic 2008-08-05  
的确如此.不过做复杂的运用的话,那些恐怕不一定合适.
1 楼 ayeah 2008-08-04  
懒人用blockUI或thickbox插件就搞得定了。。。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics