jquery经典实例之可拖拽的弹出层

分手后的思念是犯贱 2021-07-25 02:30 450阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="gbk">
    <title>可以拖拽的弹出层</title>
    <style type="text/css">
    #show{
      width:100px;
      height:30px;
      line-height:30px;
      margin:0px auto;
      background-color:yellow;
    }
    #show_dialog{
      display:none;
      padding:8px;
    }
    </style>
    <script src="jquery-1.5.1.js"></script>
    <script>
    var move_flag=false;
    var dx,dy;
    $(document).ready(function(){
      $("#show").click(function(event){
        var str="可以拖拽的弹出层";
        $("#txt").html(str);
        var wid = $(window).width();
        var hei = $(window).height();
      
        var left = (wid - 300)/2+"px";
        var top = (hei - 150)/2+"px";
      
        $("#show_dialog").css({
          "z-index":"3",
          "position":"absolute",
          "display":"block",
          "width":"300px",
          "height":"150px",
          "left":left,
          "top":top,
          "background":"#ccc",
          "color":"green",
          "border":"1px solid blue"
        })
      })
        
      $("#close_div").click(function(event){
        $("#show_dialog").slideUp("slow");
      })
      
      $("#show_dialog").mousedown(function(e){
        move_flag=true;
        dx=e.pageX-parseInt($("#show_dialog").css("left"));
        dy=e.pageY-parseInt($("#show_dialog").css("top"));
      });
        
      $(document).mousemove(function(e){
        if(move_flag){
          var x=e.pageX-dx;
          var y=e.pageY-dy;
          $("#show_dialog").css({top:y,left:x});
        }
      }).mouseup(function(){
        move_flag=false;
      });
    });
    </script>
    </head>
    <body>
    <div id="show">点击弹出层</div>
    <div id="show_dialog">
      <div id="txt" style="height:100px;"></div>
      <br/>
      <div style="text-align:right;padding-bottom:10px;">
        <input id='close_div' type="button" value="关闭此弹出层">
      </div>
    </div>
    </body>
    </html>