可移动的div弹出框-带有弹出框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>可移动的弹出框-带有弹出框</title>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
    .moveBar {
        position: absolute;
        width: 250px;
        height: 300px;
        background: #fff;
        border: solid 1px #000;
        margin: 0px;
        left:200px;
        top:200px;
    }
   
    #banner {
        background: #f8f8f8;
        cursor: move;
    }
    .table tr td{
     width:100px;height:20px;
     border:1px solid black;
    }
</style>
</head>
<script type="text/javascript">
    function showDiv(){
     //alert("show");
     document.getElementById("dv").style.display = "";
    }
   
    function closeDiv(){
     //alert("close");
     document.getElementById("dv").style.display = "none";
    }
 
    jQuery(document).ready(
        function() { 
            $('#banner').mousedown(
                function(event) {
                    var isMove = true;
                    var abs_x = event.pageX - $('div.moveBar').offset().left;
                    var abs_y = event.pageY - $('div.moveBar').offset().top;
                    $(document).mousemove(function(event) {
                        if(isMove) {
                            var obj = $('.moveBar');
                            obj.css({
                                'left': event.pageX - abs_x,
                                'top': event.pageY - abs_y
                            });
                        }
                    }).mouseup(function() {
                            isMove = false;
                        }
                    );
                }
            );
        }
     ); 
</script>
<body >
 <button onclick="showDiv();">弹出div</button>
    <div id="dv" class="moveBar" style="width:300px;height:100px;display:none;">
     <div style="float:right;height:25px;"><button onclick="closeDiv();" style="width:25px;height:25px;">X</button></div>
        <div id="banner" style="height:25px;">按住此处移动当前div</div>
        <div class="content" style="width:100%;height:75px;overflow: scroll;">
        <!--    overflow-x:hidden;overflow-y:auto; /*可单独设置左右或上下滚动条*/
          scrollbar-face-color: #20a774;/*移动滑块颜色*/
       scrollbar-shadow-color: #20a774;/*移动滑块边框颜色*/
       scrollbar-track-color: #ccc;/*背景颜色*/
       scrollbar-arrow-color: #ddd;/*箭头颜色*/
        -->
         <div style="margin-top:5px;margin-left:5px;">
          <table class="table" style="width:400px;height:100px;border-collapse:collapse;border-spacing:0;margin:0;padding:0;">
           <tr>
           <td>1111</td>
           <td>111</td>
           <td>111</td>
           <td>111</td>
           </tr>
           <tr>
           <td>1111</td>
           <td>111</td>
           <td>111</td>
           <td>111</td>
           </tr>
           <tr>
           <td>1111</td>
           <td>111</td>
           <td>111</td>
           <td>111</td>
           </tr>
           <tr>
           <td>1111</td>
           <td>111</td>
           <td>111</td>
           <td>111</td>
           </tr>
           <tr>
           <td>1111</td>
           <td>111</td>
           <td>111</td>
           <td>111</td>
           </tr>
           
          </table>
         </div>
        </div>
    </div>
   
</body>
</html>
posted @ 2018-06-08 10:05  军999  阅读(447)  评论(0)    收藏  举报