js弹框

最新推荐文章于 2025-10-06 12:20:25 发布

原创最新推荐文章于 2025-10-06 12:20:25 发布 · 783 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js弹框 #jquery弹框

前端专栏收录该内容

24 篇文章

订阅专栏

1.引入jquery.min.js

2.上代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title>无标题文档</title>
       <script language="JavaScript" type="text/javascript" src="js/jquery.min.js"></script>
   </head>
<style type="text/css">
a{text-decoration: none; color: #eee; display: block;}
.button{width: 200px; height: 50px; border-radius: 20px; text-align:center;line-height: 50px;}
.callout_button{background:#FF5B5B;margin:0 auto; }
.callout_button:hover{background: red;}
.close_button{background:#363636;margin:0 auto;}
.close_button:hover{background: black;}
.mask{width: 100%;height: 100%;background:#000;position: absolute;top: 0px;left:0px;opacity: 0.4;z-index: 8000; display: none;-moz-user-select: none; -webkit-user-select: none;}
.dialog{width: 380px;background:#fff; position: absolute;z-index: 9000;padding-bottom: 10px; display: none;-moz-user-select: none; -webkit-user-select: none;}
.dialog_head{width: 100%;height:50px;background:#4B4B4B;text-align: center;line-height: 50px;color: #eee; cursor: move;}
.dialog_content{width: 100%;height:300px;}
</style>
   <body>
       <div id="callout" class="button callout_button"><a href="#">弹出对话框</a></div>
       <div id="mask" class="mask"></div>
       <div class="dialog" id="dialog">
       <div class="dialog_head" id="move_part">可拖拽部分</div>
       <div class="dialog_content"></div>
       <div class="button close_button" id="close"><a href="#">点我关闭对话框</a>
       </div>
       </div>

</body>

//鼠标按下
$("#move_part").mousedown(function(e){
e = e || window.event;
mx = e.pageX; //点击时鼠标X坐标
my = e.pageY; //点击时鼠标Y坐标
dx = $dialog.offset().left;
dy = $dialog.offset().top;
isDraging = true; //标记对话框可拖动
});

//鼠标移动更新窗口位置
$(document).mousemove(function(e){
console.log(11);
var e = e || window.event;
var x = e.pageX; //移动时鼠标X坐标
var y = e.pageY; //移动时鼠标Y坐标
if(isDraging){ //判断对话框能否拖动
var moveX = dx + x - mx; //移动后对话框新的left值
var moveY = dy + y - my; //移动后对话框新的top值
//设置拖动范围
var pageW = $(window).width();
var pageH = $(window).height();
var dialogW = $dialog.width();
var dialogH = $dialog.height();
var maxX = pageW - dialogW; //X轴可拖动最大值
var maxY = pageH - dialogH; //Y轴可拖动最大值
moveX = Math.min(Math.max(0,moveX),maxX); //X轴可拖动范围
moveY = Math.min(Math.max(0,moveY),maxY); //Y轴可拖动范围
//重新设置对话框的left、top
$dialog.css({"left":moveX + 'px',"top":moveY + 'px'});
};
});