这里就为你详细讲解一下如何实现JS弹出浮动窗口,包括拖动和关闭功能。
准备工作
首先,我们需要在HTML文件里引入以下JS和CSS文件:
<link rel="stylesheet" href="style.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="dialog.js"></script>
其中,style.css
包含了弹窗的样式,dialog.js
包含了弹窗的逻辑代码。以上1.12.4
版本的jQuery库只是示例,大家可以根据自己的需要引入适合的版本。
实现过程
第一步:创建弹窗标签
在HTML文件中创建一个div
标签,作为弹窗的容器。我们可以将它设为display:none
,默认不显示:
<div id="dialog" style="display:none;">
<div class="dialog_title">弹窗标题</div>
<div class="dialog_content">弹窗内容</div>
<div class="dialog_close">X</div>
</div>
以上代码中,我们通过jQuery
选择器获取id
为dialog
的标签,并设置其默认样式为display:none
,表示不显示。同时,我们创建了三个子标签,分别用于显示标题、内容和关闭按钮,这些样式可以在CSS文件中定义。
第二步:弹窗打开和关闭
我们需要编写弹窗的打开和关闭逻辑,这里我们选择将这部分逻辑封装到一个单独的函数中,并添加到jQuery
的原型链上,以实现灵活调用。
$.fn.dialog = function(){
// 打开弹窗逻辑
this.show();
// 关闭弹窗逻辑
this.find('.dialog_close').click(function(){
$(this).parents('#dialog').hide();
});
}
以上代码中,我们定义了一个dialog
函数,并将它添加到jQuery
的原型链上。在函数中,首先获取当前选择器的标签(即弹窗容器),执行show()
函数,将其显示出来。同时,我们在关闭按钮上设置了click
事件,当点击关闭按钮时,执行$(this).parents('#dialog').hide()
,关闭弹窗。
第三步:拖动功能
我们还可以添加拖动功能,使得用户可以通过鼠标拖动弹窗。这里我们需要编写onmousedown
和onmousemove
事件,分别实现鼠标按下
和鼠标移动
时的逻辑。
$.fn.dialog = function(){
// 记录鼠标在标题栏中的位置
var mouseX = 0;
var mouseY = 0;
// 记录弹窗在文档中的位置
var dialogX = 0;
var dialogY = 0;
var isDragging = false;
// 打开弹窗逻辑
this.show();
// 关闭弹窗逻辑
this.find('.dialog_close').click(function(){
$(this).parents('#dialog').hide();
});
// 拖动弹窗逻辑
this.find('.dialog_title').mousedown(function(e){
isDragging = true;
mouseX = e.pageX;
mouseY = e.pageY;
dialogX = parseInt($(this).parent().css('left'));
dialogY = parseInt($(this).parent().css('top'));
});
$(document).mousemove(function(e){
if(isDragging){
var x = e.pageX - mouseX;
var y = e.pageY - mouseY;
$('#dialog').css({left:dialogX+x, top:dialogY+y});
}
});
$(document).mouseup(function(){
isDragging = false;
});
}
以上代码中,我们添加了以下几个变量:
mouseX
和mouseY
:鼠标在标题栏中的位置dialogX
和dialogY
:弹窗在文档中的位置isDragging
:标记当前是否在拖动弹窗
在标题栏中,我们实现了mousedown
事件,记录了鼠标在标题栏中的位置(即mouseX
和mouseY
),以及弹窗在文档中的位置(即dialogX
和dialogY
)。当鼠标按下时,我们将isDragging
标记为true
,表示正在拖动弹窗。
接着,我们实现了mousemove
事件,在isDragging
为true
时,计算出鼠标当前位置与初始位置之间的差值,将差值加上弹窗起始位置,即可实现弹窗拖动。
最后,我们实现了mouseup
事件,用于取消拖动状态。
示例
这里提供两种示例,一种是使用普通的<a>
标签触发弹窗打开,另一种是在页面加载时自动弹出浮动窗口。
方式一:使用<a>
标签触发弹窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="dialog.js"></script>
</head>
<body>
<a href="javascript:;" id="open_dialog">打开浮动窗口</a>
<div id="dialog" style="display:none;">
<div class="dialog_title">弹窗标题</div>
<div class="dialog_content">弹窗内容</div>
<div class="dialog_close">X</div>
</div>
<script>
$('#open_dialog').click(function(){
$('#dialog').dialog();
});
</script>
</body>
</html>
以上代码中,我们创建了一个<a>
标签,并在click
事件中,调用$('#dialog').dialog()
函数打开弹窗。
方式二:自动弹出浮动窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="dialog.js"></script>
</head>
<body>
<div id="dialog" style="display:none;">
<div class="dialog_title">弹窗标题</div>
<div class="dialog_content">弹窗内容</div>
<div class="dialog_close">X</div>
</div>
<script>
$(document).ready(function(){
$('#dialog').dialog();
});
</script>
</body>
</html>
以上代码中,我们在$(document).ready()
事件中,调用$('#dialog').dialog()
函数打开弹窗。这样,页面加载后即可自动弹出弹窗。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解 - Python技术站