返回顶部

收藏

div-弹出框及拖拽

更多
<html>
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>提示信息框</title> 
  <script src="../js/jquery.min.js" type="text/javascript"></script> 
  <style type="text/css">
    #massage_box {
        position: absolute;
        left: expression((body.clientWidth-350)/2);
        top: expression((body.clientHeight-200)/2);
        width:236px;
        height:118px;
        background:#91cce4;
        filter:alpha(opacity=90);
        visibility: hidden
    }

    #mask {
        position: absolute;
        top: 0;
        left: 0;
        width: expression(body.scrollWidth);
        height: expression(body.scrollHeight);
        background: #666;
        filter: ALPHA(opacity=60);
        z-index: 1;
        visibility: hidden
    }

    .massage {
        width:100%;
        height:21px;
        background:#5fc7db;
        line-height:21px;
        text-align:left;
        vertical-align:middle;
        position:relative;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #fff
    }
    .massage a{ 
        width:16px; height:16px; vertical-align:middle; margin-top:3px; margin-left:6px; text-indent:-999px; display:block; float:left;
        }
    .sc{
        background:url(images/info_box02.png)   no-repeat;
        }
    .sc:hover{
        background:url(images/info_box02_on.png) no-repeat;
    }
    .bc{
        background:url(images/info_box03.png) no-repeat;
        }
    .bc:hover{
        background:url(images/info_box03_on.png) no-repeat;
        }
    .tj{
        background:url(images/info_box01.png) no-repeat; 
        }
    .tj:hover{background:url(images/info_box01_on.png) no-repeat;}
    .massage a img{vertical-align:middle;}
    .close{
        width:21px; height:21px; position:absolute; right:0px; top:-1px; background:url(images/info_box04.png) no-repeat;text-indent:-999px; display:block;
    }
    .close:hover{                           background:url(images/info_box04_on.png) no-repeat;
    }

    .info{padding-left:8px; margin-top:4px;}
    .info li{  height:20px; line-height:20px; list-style-type:none; }
    .info li.pz{ vertical-align:top; }
    .info li.pz span{ vertical-align:top;  }
    .text{width:170px; height:40px;}
    .info .org{ font-weight:bold; color:#F60;}
</style> 
  <!--实现层移动--> 
  <script language="javascript">
  $(function(){
    $("#massage").mousedown(
        function(event){
            var isMove = true;
            var screenW = $(document.body).width();
            var screenH = $(document.body).height();
            var abs_x = event.pageX - $('#massage_box').offset().left; 
            var abs_y = event.pageY - $('#massage_box').offset().top;
            $(document).mousemove(function (event) {  
                    if (isMove) {  
                        var obj = $('#massage_box'); 
                        var left_x = event.pageX - abs_x;
                        var top_y = event.pageY - abs_y;
                        if((screenW-240)<=left_x){
                            left_x = screenW-240;
                        }
                        if((screenH-120)<=top_y){
                            top_y = screenH-120;
                        }
                        if(left_x<0){
                            left_x=20;
                        }
                        if(top_y<0){
                            top_y=10;
                        }
                        obj.css({'left':left_x, 'top':top_y});  
                    }  
                }
             ).mouseup(  
                                    function () {  
                                        isMove = false;  
                                    }  
                            );
        }
    );
})
</script> 
 </head>
 <body> 
  <div id="massage_box">
   <div class="massage" id ="massage">
    <a class="tj" >添加</a>
    <a class="sc" >删除</a>
    <a class="bc" >保存</a>
    <span class="close" onclick="massage_box.style.visibility='hidden'; mask.style.visibility='hidden'" >关闭</span>
    </div> 
    <ul class="info">
        <li>上日:<span class="org">487</span>&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;当日:<span class="org">610</span></li>
        <li>连续5日最高产量:<span class="org">920</span></li>
        <li class="pz"><span>批注:</span><textarea class="text"></textarea></li>
    </ul>
  </div> 
  <div id="mask"></div> 
  <span onclick="mask.style.visibility='visible';massage_box.style.visibility='visible'" style="cursor:hand"><a href="#">弹出</a></span>  
 </body>
</html>

标签:html

收藏

0人收藏

支持

0

反对

0

发表评论