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

最新推荐文章于 2023-03-05 00:29:20 发布

编程界小明哥

最新推荐文章于 2023-03-05 00:29:20 发布

阅读量390

点赞数 1

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/dkm123456/article/details/110798083

版权

jquery 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

<!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>

编程界小明哥

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery经典实例之可拖拽的弹出层

<!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_dia.
复制链接

扫一扫